为什么我的Javascript进度条在IE11中不起作用？

Question

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

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");
        }
    }
})();

这在chrome中非常有效。 但是在IE11中没有出现AT ALL（这是我的客户使用的）。 当我在IE中运行它甚至给出和错误

...由于长时间运行的脚本没有响应。

这是我实施进度条的确切原因。 有没有我错过IE浏览器没有Chrome的东西？ 我怎样才能改变它以使其在IE中运行？

Answer 1

好的，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");
        }
    }
})();
}

然后用以下方法调用：

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