jQuery .each waits until all are finished before appending html

Question

I'm working on a way that I can keep multiple instances of a php program updated to the same version without much effort.

My software checks for an RSS feed, which includes information on the most up-to-date version. If it sees that there is an update available, it shows a link to the "Update" page. When the user clicks on the Update link, I have a jquery function that updates each file that needs to be updated one at a time:

$.getJSON('http://softwareserver.com/updateFileList.php?fromver=1.0', function(data) {
    var filesToDo = data.length;

    $.each(data, function(num, file) {
        num = num + 1;
        action = file.charAt(0);
        name = file.substring(1);

        if ( action == "+" )
        {
            $('#upsole').append("Adding " + name + ". . .");
                $.get("{$var['sbpurl']}/updateAction.php", { action: "add", file: name, revision: "{$TMP['rev']}" } );
        }

        else if ( action == "-" )
        {
            $('#upsole').append("Removing " + name + ". . .");
                $.get("{$var['sbpurl']}/updateAction.php", { action: "remove", file: name, revision: "{$TMP['rev']}" } );
        }

        else if ( action == "~" )
        {
            $('#upsole').append("Updating " + name + ". . .");
                $.get("{$var['sbpurl']}/updateAction.php", { action: "update", file: name, revision: "{$TMP['rev']}", version: "{$TMP['ver']}" } );
        }

        var completed = num / filesToDo * 100;

        $('#barcolor').css('width', completed + '%');
        $('#numProgress').html(completed.toFixed(0));

        if ( completed == 100 )
        {
            $('#conutt').html(' Continue > ');
            $('#upsole').append("Update Complete");
        }
    });
});

I show each file name in a div container as it's being updated; I also have a progress bar that goes from 0-100% as each file is updated until all files have been updated.. but it simply goes from 0 to 100 when it's all finished. It doesn't actually show the progress as each file updates in between like I want it to.

I expect my progress bar to go from 0%, to like 7%, 15%, etc, until it reaches 100% but nothing happens until it's all finished.. so as I said, it just goes from 0% to 100%.

Is $.each not the best solution for this?

mu is too short · Accepted Answer

No, $.each isn't quite the right tool for this job. Your main problem is that JavaScript in the browser is single threaded so all your DOM updates:

$('#upsole').append(...)
$('#barcolor').css(...)
$('#numProgress').html(...)

will just be queued up to be handled when the browser gets control back. So when does the browser regain control? After the $.each is finished of course. You see the result: the user sees things go from nothing to finished in one step. You also have the asynchronous nature of $.get to consider.

You need to hand control back to the browser after each DOM update. You have a bunch of $.get calls so you could use their success callbacks to interleave your DOM changes with the browser's response to those changes. Something like this:

$.getJSON('http://softwareserver.com/updateFileList.php?fromver=1.0', function(data) {
    var filesToDo = data.length;
    var next_one  = function() {
        var file = data.shift();
        if(!file) {
            // If `data` is empty then we're all done so we can put the UI into
            // the "update complete" state and end the process by not calling
            // next_one() again.
            $('#conutt').html(' Continue > ');
            $('#upsole').append("Update Complete");
            return; 
        }

        // Set up the next iteration by parsing `file`. We put the `$.get` stuff
        // into an object so that we only have one `$.get` call; the reason for
        // this will be clear shortly.
        var action = file.charAt(0);
        var name   = file.substring(1);
        var get    = { };
        if(action == '+') {
            get = {
                msg:    'Adding ' + name + '...',
                url:    "{$var['sbpurl']}/updateAction.php",
                params: { action: "add", file: name, revision: "{$TMP['rev']}" }   
            };
        }
        else if(action == '-') {
            //...
        }
        else if(action == '~') {
            //...
        }

        // Tell them what we're about to do...
        $('#upsole').append(get.msg);

        // This `$.get` call is asynchronous so the browser will get control here 
        // and any pending DOM updates will be applied.
        $.get(get.url, get.params, function() {
            // Update the DOM with the latest status.
            var completed = (filesToDo - data.length) / filesToDo * 100;
            $('#barcolor').css('width', completed + '%'); 
            $('#numProgress').html(completed.toFixed(0));

            // And trigger the next iteration.
            next_one();
        });
    };

    // Crank it up.
    next_one();
});

The basic idea is to iterate over data until it is empty, each iteration removes the first element of data so we can detect the end of data (and the end of our iterating) by seeing when it returns undefined (which is falsey). Each iteration will trigger a $.get, that will return control to the browser to allow the DOM to be updated. The $.get callback will then trigger the next iteration.

Niceties such as error handling is left as an exercise for the reader.

jQuery .each waits until all are finished before appending html

Answers (2)

Related Questions