为什么我的Javascript进度条没有'；你不在IE11工作吗？

我有一个长时间运行的脚本，它在进度条中崩溃了：

HTML

<div id="progressbar-wrapper">
    <div id="progressbar-outer" style="display: table;margin: 0 auto;background-color: #FFFFFF;border: 5px solid #000000;width: 50%;height: 30px;opacity: 1;z-index: 9998">
        <div id="progressbar" style="float:left;width: 0;height: 30px;background-color:#000000;border: 0;opacity: 1;z-index: 99999">
        </div>
    </div>
    <div id="loading-animation" style="position: fixed;top: 150px;left: 0;height: 120px;width: 100%;font-size: 100px;line-height: 120px;text-align: center;color: #000000;z-index: 9999;">
        ...SAVING...<br /><small>Saving Lines</small>
    </div>
</div>

…保存…
保存行

JavaScript

    var uiprogressbar = {};
    $(function () {

        uiprogressbar = {

            /** initial progress */
            progress: 0,

            /** maximum width of progressbar */
            progress_max: 0,

            /** The inner element of the progressbar (filled box). */
            $progress_bar: $('#progressbar'),

            /** Method to set the progressbar.
             */
            set: function (num) {
                if (this.progress_max && num) {
                    this.progress = num / this.progress_max * 100;
                    console.log('percent: ' + this.progress + '% - ' + num + '/' + this.progress_max);
                    this.$progress_bar.width(String(this.progress) + '%');
                }
            },

            fn_wrap: function (num) {
                setTimeout(function () {
                    this.set(num);
                }, 0);
            }

        };

    });

//PROGRESS BAR ================================================
//max progress bar
uiprogressbar.progress_max = iterations;

var mainGrid = $("#mainGrid").data("kendoGrid");

var i = 0; //partition #
var j = 0; //line #
var linesUpdated = 0; //update complete #


//make the progress bar visable before updating
$("#progressbar-wrapper").css("display", "block");


//then loop through update grid methods
(function innerloop() {

    try {
        //If end 
        var testPart = (partitions[i].length - 1); //30 but starts at 0
    } catch (err) {
        //exit loop
        return;
    }

    //Get the length of the partition
    var thisPartitionLength = (partitions[i].length - 1); //30 but starts at 0


    if (thisPartitionLength >= j && successComplete === 2) {

        $.each(mainGrid.dataSource.data(),
            function () {

                if (this.RowSelected === true) { 

                    //get id
                    var row = mainGrid.dataSource.getByUid(this.uid);

                    //unselect and turn off dirty
                    row.set("RowSelected", "false");
                    row.set("dirty", "false");
                    linesUpdated++;
                }
            });
        //update line #
        j++;
        //update progressbar
        uiprogressbar.set(linesUpdated);
    }

    if (j <= thisPartitionLength) {
        //loop if not complete with partition
        setTimeout(innerloop, 0);
    } else {
        if (j > thisPartitionLength) {
            //if end of partition reset the line # and increase partition # and continue loop
            i++;
            j = 0;
            setTimeout(innerloop, 0);
        }

        //on complete
        if (linesUpdated === iterations) {

            //Success message
            alert("Saved");
        }
    }
})();

var uiprogressbar={}；
$（函数（）{
uiprogressbar={
/**初步进展*/
进展：0，
/**进度条的最大宽度*/
最大进度：0，
/**progressbar的内部元素（填充框）*/
$progressbar:$（“#progressbar”），
/**方法设置进度条。
*/
设置：函数（num）{
if（this.progress\u max&&num）{
this.progress=num/this.progress_max*100；
console.log（'percent:'+this.progress+'%-'+num+'/'+this.progress_max）；
this.$progress_bar.width（字符串（this.progress）+'%'）；
}
},
fn_wrap：函数（num）{
setTimeout（函数（）{
此.set（num）；
}, 0);
}
};
});
//进度条================================================
//最大进度条
uiprogressbar.progress_max=迭代次数；
var mainGrid=$（“#mainGrid”）.data（“kendoGrid”）；
var i=0//分割#
var j=0//线#
var linesUpdated=0//更新完成#
//更新前，使进度条可见
$（“#progressbar包装器”）.css（“显示”、“块”）；
//然后循环更新网格方法
（函数innerloop（）{
试一试{
//如果结束
var testPart=（分区[i].length-1）；//30但从0开始
}捕捉（错误）{
//出口回路
返回；
}
//获取分区的长度
var thisPartitionLength=（分区[i]。长度-1）；//30但从0开始
如果（thisPartitionLength>=j&&successComplete==2）{
$.each（mainGrid.dataSource.data（），
函数（）{
如果（this.RowSelected==true）{
//取得身份证
var row=mainGrid.dataSource.getByUid（this.uid）；
//取消选择并关闭“脏”
row.set（“RowSelected”、“false”）；
行集合（“脏”、“假”）；
linesUpdated++；
}
});
//更新行#
j++；
//更新进度条
uiprogressbar.set（行支持）；
}
if（j thisPartitionLength）{
//如果分区结束，则重置行#并增加分区#，然后继续循环
i++；
j=0；
setTimeout（内部循环，0）；
}
//完全
if（linesUpdated==迭代次数）{
//成功信息
警报（“已保存”）；
}
}
})();

它在铬合金中工作得非常好。但在IE11中根本没有出现（这是我的客户使用的）。当我在IE中运行它时，它甚至会给出错误

…由于长时间运行的脚本而没有响应

---

这正是我实现进度条的原因。有什么东西我遗漏了，IE有，Chrome没有？如何更改此项以使其在IE中工作？

好的，因此IE将等待功能完成后再进行更改。我必须将进度条方法剥离到一个单独的函数中，并将其包装在一个超时中：

function updateProgressBar(){
//PROGRESS BAR ================================================
//max progress bar
uiprogressbar.progress_max = iterations;

var mainGrid = $("#mainGrid").data("kendoGrid");

var i = 0; //partition #
var j = 0; //line #
var linesUpdated = 0; //update complete #


//make the progress bar visable before updating
$("#progressbar-wrapper").css("display", "block");


//then loop through update grid methods
(function innerloop() {

    try {
        //If end 
        var testPart = (partitions[i].length - 1); //30 but starts at 0
    } catch (err) {
        //exit loop
        return;
    }

    //Get the length of the partition
    var thisPartitionLength = (partitions[i].length - 1); //30 but starts at 0


    if (thisPartitionLength >= j && successComplete === 2) {

        $.each(mainGrid.dataSource.data(),
            function () {

                if (this.RowSelected === true) { 

                    //get id
                    var row = mainGrid.dataSource.getByUid(this.uid);

                    //unselect and turn off dirty
                    row.set("RowSelected", "false");
                    row.set("dirty", "false");
                    linesUpdated++;
                }
            });
        //update line #
        j++;
        //update progressbar
        uiprogressbar.set(linesUpdated);
    }

    if (j <= thisPartitionLength) {
        //loop if not complete with partition
        setTimeout(innerloop, 0);
    } else {
        if (j > thisPartitionLength) {
            //if end of partition reset the line # and increase partition # and continue loop
            i++;
            j = 0;
            setTimeout(innerloop, 0);
        }

        //on complete
        if (linesUpdated === iterations) {

            //Success message
            alert("Saved");
        }
    }
})();
}

---

啊，IE.progressbar的乐趣是一个id和变量名，这可能会导致问题，请尝试重命名一个。为什么定义一个id而不在CSS中使用它@亚历克斯克。我更改了变量名。但问题依然存在。我更新了问题。

        setTimeout(function() {
                updateProgressBar();
            }, 0);