Why my Javascript progress bar doesn't work in IE11?

Question

I have a long running script that broke down in a progress bar:

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

Which works perfectly in chrome. But doesn't appear AT ALL in IE11 (which is what my clients use). When i run it in IE it even gives and error

...not responding due to a long-running script.

which was the exact reason i implemented a progress bar. Is there something I'm missing that IE has that Chrome does not? How can i change this to make it work in IE?

Answer 1

OK so IE waits till the function is complete to make changes. I has to strip out the progress bar method into a separate function and wrap it in a timeout:

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

then call it using:

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