javascript - 提交时构建对象会导致应用程序阻塞

Question

概述

我开发了一个具有几个不同功能的就业应用程序。长话短说，应用程序中有几个部分允许您添加就业历史记录、添加地址历史记录、事故和许可证历史记录等。在整个工作结束时，我构建了一个 JSON 对象并准备将其提交给服务器。这就是要点。

问题

假设您在过去十年中拥有大量的工作经历，并且您显然会将几乎所有您记得的或与申请相关的内容都放在其中。假设有 12 个工作岗位。假设您的地址历史记录中总共有 3 个地址。这将为我们提供总共 13 个克隆对象。现在我生成的循环将很好地读取这些内容，但发生的情况是，我猜这是我的循环结构，当克隆对象的计数变得如此高时，它开始在循环时导致超时错误，并且基本上卡住了。

修复

我需要找到循环中可能导致或可能不导致此问题的错误。

我将在下面发布我的代码和实时应用程序的链接，以便任何想要尝试这个的人都可以尝试一下并明白我的意思。我们花了几天的时间进行一些令人难以置信的调试才走到这一步。

资源

 $('#applicationForm').submit(function(e){
    e.preventDefault(); //stop the form from the default submission
    $('body').spin('large');
    var application_info = new Object(); //start the application form Object
    $('#submit-btn').prop('disabled', true);
    if(checkHeadings(sections)){
        for(var i = 0; i < sections.length; i++){
            application_info[sections[i]] = new Object(); //create a new object for each section
            //traverse each select by form control 
            $("#"+sections[i]).find(".form-control").map(function (index, element){
                $(element).each(function (index){
                    var name = $(element).attr('name');
                    if((sections[i] !== 'addressRecords') && (sections[i] !== 'employmentHistory') && (sections[i] !== 'drivingExperience')){
                        application_info[sections[i]][$(element).attr('name')] = $('[name="'+name+'"]').eq(index).val(); //application_info 
                    }else if(sections[i] === 'addressRecords'){
                        application_info['addresses'] = $('.form-control').map(function (index, element) {
                            return {
                                line1: $('[name="address"]').eq(index).val(),
                                line2: $('[name="address2"]').eq(index).val(),
                                city: $('[name="city"]').eq(index).val(),
                                state: $('[name="state"]').eq(index).val(),
                                zip: $('[name="zip"]').eq(index).val(),
                                from_date: $('[name="from_date"]').eq(index).val(),
                                to_date: $('[name="to_date"]').eq(index).val()
                            };
                        }).get();
                    }else if(sections[i] === 'employmentHistory'){
                        application_info['employmentHistory'] = $('.form-control').map(function (index, element) {
                            return {
                                from_date: $('[name="emp_from_date"]').eq(index).val(),
                                to_date: $('[name="emp_to_date"]').eq(index).val(), 
                                company: $('[name="company"]').eq(index).val(), 
                                contact: $('[name="supervisor"]').eq(index).val(), 
                                phone: $('[name="company_phone"]').eq(index).val(), 
                                address: $('[name="company_address"]').eq(index).val(), 
                                city: $('[name="company_city"]').eq(index).val(), 
                                state: $('[name="company_state"]').eq(index).val(), 
                                zip: $('[name="company_zip"]').eq(index).val(), 
                                position_held: $('[name="position"]').eq(index).val(), 
                                reason_left: $('[name="reason_left"]').eq(index).val(), 
                                fmscr: $('.fmscr:checked').eq(index).val(), 
                                drug_testing: $('.drug_testing:checked').eq(index).val()
                            };
                        }).get();
                    }else if(sections[i] === 'drivingExperience'){
                        application_info['drivingExperience'] = {                            
                                tt_from_date : $('[name="tt-from-date"]').eq(index).val(),
                                tt_to_date : $('[name="tt-to-date"]').eq(index).val(),
                                tt_miles : $('[name="tt-miles"]').eq(index).val(),
                                st_from_date : $('[name="st-from-date"]').eq(index).val(),
                                st_to_date : $('[name="st-to-date"]').eq(index).val(),
                                st_miles : $('[name="st-miles"]').eq(index).val(),
                                accident_records : $('.form-control').map(function (index, element) {
                                    return {
                                        date : $('[name="accident-date"]').eq(index).val(),
                                        nature : $('[name="nature"]').eq(index).val(),
                                        location : $('[name="location"]').eq(index).val(),
                                        fatalities : $('[name="fatalities"]').eq(index).val(),
                                        injuries : $('[name="injuries"]').eq(index).val()
                                    };
                                }).get(),
                                traffic_citations : $('.form-control').map(function (index, element) {
                                    return {
                                        location : $('[name="citation-location"]').eq(index).val(),
                                        date : $('[name="citation-date"]').eq(index).val(),
                                        charge : $('[name="charge"]').eq(index).val(),
                                        penalty : $('[name="penalty"]').eq(index).val()
                                    };
                                }).get(),
                                license_records : $('.form-control').map(function (index, element) {
                                    return {
                                        state : $('[name="license_state"]').eq(index).val(),
                                        license_no : $('[name="license_no"]').eq(index).val(),
                                        type : $('[name="license_type"]').eq(index).val(),
                                        endorsements : $('[name="endorsements"]').eq(index).val(),
                                        date : $('[name="license_date"]').eq(index).val()
                                    };
                                }).get(),
                                qa : $('[name="qa"]:checked').eq(index).val(),
                                qa_explain : $('[name="qa_explain"]').eq(index).val(),
                                qb : $('[name="qb"]:checked').eq(index).val(),
                                qb_explain : $('[name="qb_explain"]').eq(index).val(),
                                qc : $('[name="qc"]:checked').eq(index).val(),
                                qc_explain : $('[name="qc_explain"]').prop('checked') ? 1 : -1,
                                qd : $('[name="qd"]:checked').eq(index).val()
                        };
                    }
                });
            }).get();
            if($('input[name="other"]').is(":visible")){
                application_info['generalInformation']['other'] = $('input[name="other"]').val();
            }else{
                application_info['generalInformation']['other'] = "";
            }
            application_info['selfIdentification'] = new Object();
            application_info['selfIdentification']['race'] = $('[name="race"]').is(":checked") ? $('[name="race"]:checked').val() : "";
            application_info['selfIdentification']['gender'] = $('[name="gender"]').is(":checked") ? $('[name="gender"]:checked').val() : "";
            application_info['selfIdentification']['disability'] = $('[name="disability"]').is(":checked") ? $('[name="disability"]:checked').val() : "";
            application_info['selfIdentification']['veteran'] = $('[name="veteran"]').is(":checked") ? $('[name="veteran"]:checked').val() : "";
        }
        $.ajax({
            url: '../assets/server/application_process.php',
            type : 'post',
            data : application_info,
            dataType : 'JSON',
            success : function (data){
                $('body').spin(false);
                if(!data.errors){
                    $('#applicationForm').html("<h3>"+data.message+"</h3>");                                  
                }else{
                    bootbox.alert(data.message);
                }
            }
        });
    }else{
        $('body').spin(false);
        $('#submit-btn').prop('disabled', false);
    }
});

应用:

http://www.driveforeagle.com/apply/page2

Answer 1

在这部分中，您似乎有额外的迭代。

$("#"+sections[i]).find(".form-control").map(function (index, element){
      $(element).each(function (index){
      ...
  })
})

您不需要 $(element).each(function (index){...} - 您已经在 map 中迭代选择。

编辑

我尝试重构您的代码，因为我理解您的逻辑，请在下面展开。仍有优化的空间，但我希望有所帮助。

$('#applicationForm').submit(function(e) {
    e.preventDefault(); //stop the form from the default submission
    $('body').spin('large');
    var application_info = { //start the application form Object
        generalInformation: {
            other: $('input[name="other"]').is(":visible") ? $('input[name="other"]').val() : ""
        },
        selfIdentification: {
            race: $('[name="race"]').is(":checked") ? $('[name="race"]:checked').val() : "",
            gender: $('[name="gender"]').is(":checked") ? $('[name="gender"]:checked').val() : "",
            disability: $('[name="disability"]').is(":checked") ? $('[name="disability"]:checked').val() : "",
            veteran: $('[name="veteran"]').is(":checked") ? $('[name="veteran"]:checked').val() : ""
        }
    };


    $('#submit-btn').prop('disabled', true);
    if (checkHeadings(sections)) {
        var obj = {};
        for (var i = 0; i < sections.length; i++) {
            var sectionId = sections[i],
                $section = $("#" + sectionId);

            //traverse each select by form control 
            switch (sectionId) {
                case 'addressRecords':
                    obj['addresses'] = [];
                    $section.find('[name="address"]').each(function(index, element) {
                        obj['addresses'].push({
                            line1: $section.find('[name="address"]').eq(index).val(),
                            line2: $section.find('[name="address2"]').eq(index).val(),
                            city: $section.find('[name="city"]').eq(index).val(),
                            state: $section.find('[name="state"]').eq(index).val(),
                            zip: $section.find('[name="zip"]').eq(index).val(),
                            from_date: $section.find('[name="from_date"]').eq(index).val(),
                            to_date: $section.find('[name="to_date"]').eq(index).val()
                        });
                    });
                    break;

                case 'employmentHistory':
                    obj['employmentHistory'] = [];
                    $section.find('[name="address"]').each(function(index, element) {
                        obj['employmentHistory'].push({
                            from_date: $section.find('[name="emp_from_date"]').eq(index).val(),
                            to_date: $section.find('[name="emp_to_date"]').eq(index).val(),
                            company: $section.find('[name="company"]').eq(index).val(),
                            contact: $section.find('[name="supervisor"]').eq(index).val(),
                            phone: $section.find('[name="company_phone"]').eq(index).val(),
                            address: $section.find('[name="company_address"]').eq(index).val(),
                            city: $section.find('[name="company_city"]').eq(index).val(),
                            state: $section.find('[name="company_state"]').eq(index).val(),
                            zip: $section.find('[name="company_zip"]').eq(index).val(),
                            position_held: $section.find('[name="position"]').eq(index).val(),
                            reason_left: $section.find('[name="reason_left"]').eq(index).val(),
                            fmscr: $section.find('.fmscr:checked').eq(index).val(),
                            drug_testing: $section.find('.drug_testing:checked').eq(index).val()
                        });
                    });
                    break;

                case 'drivingExperience':
                    obj['drivingExperience'] = {
                        tt_from_date: $section.find('[name="tt-from-date"]').eq(0).val(),
                        tt_to_date: $section.find('[name="tt-to-date"]').eq(0).val(),
                        tt_miles: $section.find('[name="tt-miles"]').eq(0).val(),
                        st_from_date: $section.find('[name="st-from-date"]').eq(0).val(),
                        st_to_date: $section.find('[name="st-to-date"]').eq(0).val(),
                        st_miles: $section.find('[name="st-miles"]').eq(0).val(),
                        accident_records: [],
                        traffic_citations: [],
                        license_records: [],
                        qa: $section.find('[name="qa"]:checked').eq(0).val(),
                        qa_explain: $section.find('[name="qa_explain"]').eq(0).val(),
                        qb: $section.find('[name="qb"]:checked').eq(0).val(),
                        qb_explain: $section.find('[name="qb_explain"]').eq(0).val(),
                        qc: $section.find('[name="qc"]:checked').eq(0).val(),
                        qc_explain: $section.find('[name="qc_explain"]').prop('checked') ? 1 : -1,
                        qd: $section.find('[name="qd"]:checked').eq(0).val()
                    };

                    $section.find('[name="accident-date"]').each(function(index, element) {
                        obj['accident_records'].push({
                            date: $section.find('[name="accident-date"]').eq(index).val(),
                            nature: $section.find('[name="nature"]').eq(index).val(),
                            location: $section.find('[name="location"]').eq(index).val(),
                            fatalities: $section.find('[name="fatalities"]').eq(index).val(),
                            injuries: $section.find('[name="injuries"]').eq(index).val()
                        });
                    });

                    $section.find('[name="citation-location"]').each(function(index, element) {
                        obj['traffic_citations'].push({
                            location: $section.find('[name="citation-location"]').eq(index).val(),
                            date: $section.find('[name="citation-date"]').eq(index).val(),
                            charge: $section.find('[name="charge"]').eq(index).val(),
                            penalty: $section.find('[name="penalty"]').eq(index).val()
                        });
                    });

                    $section.find('[name="license_state"]').each(function(index, element) {
                        obj['license_records'].push({
                            state: $section.find('[name="license_state"]').eq(index).val(),
                            license_no: $section.find('[name="license_no"]').eq(index).val(),
                            type: $section.find('[name="license_type"]').eq(index).val(),
                            endorsements: $section.find('[name="endorsements"]').eq(index).val(),
                            date: $section.find('[name="license_date"]').eq(index).val()
                        });
                    });

                    break;

                default:
                    // = if (( !== 'addressRecords') && (sections[i] !== 'employmentHistory') && (sections[i] !== 'drivingExperience')) {
                    obj[sectionId][element.name] = element.value;
                    break;
            }

            application_info[sectionId] = obj;

        }

        $.ajax({
            url: '../assets/server/application_process.php',
            type: 'post',
            data: application_info,
            dataType: 'JSON',
            success: function(data) {
                $('body').spin(false);
                if (!data.errors) {
                    $('#applicationForm').html("<h3>" + data.message + "</h3>");
                } else {
                    bootbox.alert(data.message);
                }
            }
        });
    } else {
        $('body').spin(false);
        $('#submit-btn').prop('disabled', false);
    }
});