如何解决JavaScript代码中超出最大调用堆栈大小的问题 [英] How to solve the Maximum call stack size exceeded issue in JavaScript Code

问题描述

如下所示，我正在使用淘汰赛.我有多个视图模型，它们正在组合并传递给控制器​​.问题是，当我运行应用程序时，在打开浏览器时单击 F12 来检查错误，我遇到了这个小问题:

As shown below I am using knockout. I have multiple view models which I am combining and passing through to the controller . The problem is that when I run the application, upon clicking F12 to check for errors while the browser is open I came across this small issue:

未捕获的RangeError:超出了最大调用堆栈大小

Uncaught RangeError: Maximum call stack size exceeded

function FullEmployeeProfile ()
{
    var EmployeeEdu = new employeeEducation();
    var EmployeeHist =  new employeeEducation();
    var EmpInfo = new employeeEducation();  

}
function employeeInfo() {
    var ei = this;

     var ei = this;
        ei.Name = ko.observable("");
        ei.ID = ko.observable("");
        ei.Gender = ko.observable("");
        ei.address = ko.observable("") ;     
    }
function employeeHistory() {
        var eh = this 

         var self = this;
        eh.CompanyName = ko.observable();
        eh.Designation = ko.observable();
        eh.StartDate = ko.observable();
        eh.EndDate = ko.observable();
}

function employeeEducation() {
    var ee = this;
        ee.Degree = ko.observable();
        ee.YearOfPassing = ko.observable();
        ee.Percentage = ko.observable();
        ee.Institute = ko.observable()


    ee.fullEmployeeDetails = new FullEmployeeProfile();
    ee.saveEmployeeDetails = function() {

        $.when(postSecureData("/api/EmployeeProfile/", ko.toJSON(ee.fullEmployeeDetails)))
        .done(function (empProfile) {
            if (response.ResponseRequired == false) {
            document.getElementById("save-empDetails-btn").innerHTML = "Saving...";
            setTimeout(function () { document.getElementById("save-empDetails-btn").innerHTML = "Save" }, 2500);
            $.msgGrowl({
                type: 'info',
                title: 'Employee information saved',


        }); }

        });
    };

}

推荐答案

我遇到了您的问题.您的代码卡在了无限的函数调用中，这导致您的浏览器的堆栈大小超过了.

I got your problem. your code is stucking in infinite function calls which is causing your browser's stack size exceeding.

当函数employeeEducation()被执行时，其行为如下(请参见注释行之间的行):

when Your function employeeEducation() gets executed, Then its behavior is as follows (see line between commented lines):

function employeeEducation() {
    var ee = this;
        ee.Degree = ko.observable();
        ee.YearOfPassing = ko.observable();
        ee.Percentage = ko.observable();
        ee.Institute = ko.observable()

//........................................................
    ee.fullEmployeeDetails = new FullEmployeeProfile();
//................................................
    ee.saveEmployeeDetails = function() {

        $.when(postSecureData("/api/EmployeeProfile/", ko.toJSON(ee.fullEmployeeDetails)))
        .done(function (empProfile) {
            if (response.ResponseRequired == false) {
            document.getElementById("save-empDetails-btn").innerHTML = "Saving...";
            setTimeout(function () { document.getElementById("save-empDetails-btn").innerHTML = "Save" }, 2500);
            $.msgGrowl({
                type: 'info',
                title: 'Employee information saved',


        }); }

        });
    };

请参见上面突出显示的文本，该文本调用FullEmployeeProfile()构造函数.并执行关注(关注注释行之间的行):

See highlighted text above, which calls FullEmployeeProfile() constructor. And execute Following (Focus on the line between commented lines):

function FullEmployeeProfile ()

{
    var EmployeeEdu = new employeeEducation();
    var EmployeeHist =  new employeeEducation();
//.......................................................
    var EmpInfo = new employeeEducation();
//...........................................................

}

然后，在上面的代码中，它将再次执行employeeEducation()，依次执行 ee.fullEmployeeDetails = new FullEmployeeProfile(); 语句，该语句调用FullEmployeeProfile()构造函数，依此类推.它会无限持续下去，直到超过浏览器的堆栈大小为止.

And, in above code it'll execute employeeEducation() again, which in-turn execute ee.fullEmployeeDetails = new FullEmployeeProfile(); statement which calls FullEmployeeProfile() constructor, and so on . It continues infinitely until your browser's stack size exceeded.

这种情况类似于:A正在呼叫B，而B正在呼叫A ...

尝试更改您的代码.

这篇关于如何解决JavaScript代码中超出最大调用堆栈大小的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！