knockout.js 如何解决JavaScript代码中超出最大调用堆栈大小的问题

nhn9ugyo  于 2022-11-10  发布在  Java
关注(0)|答案(1)|浏览(103)

如下图所示,我正在使用knockout。我有多个视图模型,我正在组合并传递到控制器。问题是,当我运行应用程序时,在浏览器打开时单击F12检查错误时,我遇到了这个小问题:
未捕获范围错误:超出最大调用堆栈大小

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',

        }); }

        });
    };

}
66bbxpm5

66bbxpm51#

我知道你的问题了。你的代码被无限的函数调用卡住了,这导致你的浏览器的堆栈大小超过了。
当你的函数employeeEducation()被执行时,那么它的行为如下(见注解行之间的行):

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()构造函数。然后执行以下命令(关注注解行之间的行):

function FullEmployeeProfile ()

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

}

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

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

请尝试更改代码。

相关问题