Question

I have javascript/jquery code which fetches info and updates it into the database with a mixture of while/for loops. While fetching, I have a div which shows a current progress log of whats going on. In Firefox, as the script is running it updates the div at the same time as it should. In Google Chrome, it runs the entire loop, holding back the log, and only outputs it until the script is finished running. Anyone have any idea why this is happening?

Here is my code:

$(document).ready(function() {
    add_text("test");

    var array_length = num_sets;

    for(var i = 0; i < array_length; i = i + 1) {
        var setId = sets[i]['id'];
        var setName = sets[i]['name'];
        var setLinkName = sets[i]['link'];
        var setNumCards = sets[i]['num_cards'];

        add_text("Beginning to fetch set \"" + setName + "\"");
        add_text("Found " + setNumCards + " total cards.");

        while(ii < setNumCards) {
            var card_name = sets[i]['cards'][ii]['name'];
            var card_link = sets[i]['cards'][ii]['link'];
            add_text("Fetching card " + sets[i]['cards'][ii]['name']);

            fetch_card(sets[i]['cards'][ii]['link'], setId);
        }

    }
});

add_text function:

function add_text(text) {
    $("#status_text").append("<br />" + text);
}

fetch_card function:

function fetch_card(card_link, set_id)
{
    $.ajax({
      url: "fetch_card.php?link=" + card_link + "&set_id=" + set_id,
      context: document.body,
      async: false,
      success: function(){
        ii = ii + 1;
      }
    });
}

Answer 1

You are using synchronous ajax calls (which are generally not very desirable). The browser can block all activity until that ajax call completes. Whether or not the browser updates the screen during a synchronous ajax call is up to the browser.

Your code would be much better if it was rewritten to use asychronous ajax only. It takes a little more work to structure your code properly to work with asynchronous ajax calls, but the browser remains completely responsive during the asynchronous ajax calls.

I’m not entirely sure how you were using the ii variable in your original implementation (as it wasn’t declared or initialized in the code you included), but this is the general structure you could use. It uses the traditional for loop to collect all the data you wanted in an array, then calls the ajax function one a time on that data. It isn’t clear to me how you’re actually doing anything with the returned ajax info, but perhaps that just isn’t something you included here:

$(document).ready(function() {
    add_text("test");

    var array_length = num_sets;
    var fetchData = [];
    var fetchIndex = 0;

    for(var i = 0; i < array_length; i++) {
        var setId = sets[i]['id'];
        var setName = sets[i]['name'];
        var setLinkName = sets[i]['link'];
        var setNumCards = sets[i]['num_cards'];

        add_text("Beginning to fetch set \"" + setName + "\"");
        add_text("Found " + setNumCards + " total cards.");
        for (var ii = 0; ii < setNumCards; ii++) {
            var card_name = sets[i]['cards'][ii]['name'];
            var card_link = sets[i]['cards'][ii]['link'];
            add_text("Fetching card " + sets[i]['cards'][ii]['name']);
            fetchData.push({link: sets[i]['cards'][ii]['link'], id: setId});
        }
    }

    function next() {
        if (fetchIndex < fetchData.length) {
            fetch_card(fetchData[fetchIndex].link, fetchData[fetchIndex].id, next);
            fetchIndex++;
        }
    }

    function fetch_card(card_link, set_id, successFn) {
        $.ajax({
          url: "fetch_card.php?link=" + card_link + "&set_id=" + set_id,
          context: document.body,
          async: true,
          success: successFn
        });
    }

    next();
});