我能做些什么来阻止由这段代码引起的轻微页面延迟吗?

Question

我让这段代码在我的页面上循环，当选中一个选择框时，它会导致轻微的页面延迟。有什么方法可以优化代码吗?我对javascript还很陌生，所以我可能把一些东西混在一起了。

var OpeningEmployees = document.getElementById('opener');
var QuantityDDOptions = jQuery('#opener option').length;
var DropDownNames = new Array();
DropDownNames[0] = "opener";
DropDownNames[1] = "mid";
DropDownNames[2] = "closer";
DropDownNames[3] = "SRTW";
DropDownNames[4] = "CR";
DropDownNames[5] = "Aisles";
DropDownNames[6] = "BD";
DropDownNames[7] = "Fridge";
DropDownNames[8] = "AP";
DropDownNames[9] = "EPV";

OpeningEmployees.onchange = function () {
    var openerVals = $("#opener").val();
    for (var j = 1; j < DropDownNames.length; j++){
        for (var x = 0; x < QuantityDDOptions; x++) {
            var EmployeelNumLine = document.getElementById(DropDownNames[j]).options[x].value;
            if (openerVals == null){
                jQuery("select#"+DropDownNames[j]+" option")[x].removeAttribute("disabled");
                $("#"+DropDownNames[j]).multiselect("refresh");
            } else if(openerVals.indexOf(EmployeelNumLine) > -1) {
                jQuery("select#"+DropDownNames[j]+" option")[x]['disabled'] = "true";
                $("#"+DropDownNames[j]).multiselect("refresh");
            } else if(!openerVals.indexOf(EmployeelNumLine) > -1){
                jQuery("select#"+DropDownNames[j]+" option")[x].removeAttribute("disabled");
                $("#"+DropDownNames[j]).multiselect("refresh");
            }
        }
    }
}

Answer 1

一般来说，如果循环锁定线程，可以将其重构为使用超时调用的递归循环。这可以防止UI冻结。

对于较大的n值，这将冻结您的浏览器:

for (i = 0; i < n; i++){
    //dosomething();
}

另一方面，这会减慢你的速度，但不会锁定浏览器:

(function iterate(i) {
    if (i < n) {
        //dosomething();
        setTimeout(function () {
            iterate(++i);
        }, 0);
    }
})(0)