Почему вывод Javascript задерживается в Google Chrome?

Question

У меня есть код javascript / jquery, который извлекает информацию и обновляет ее в базе данных со смесью циклов while / for.При получении, у меня есть div, который показывает текущий прогресс, что происходит.В Firefox при запуске скрипта он обновляет div в то же время, что и должен.В Google Chrome он запускает весь цикл, удерживая журнал, и выводит его только до завершения работы скрипта.Кто-нибудь знает, почему это происходит?

Вот мой код:

$(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 add_text(text) {
    $("#status_text").append("<br />" + text);
}

Функция fetch_card:

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

Вы используете синхронные вызовы ajax (которые обычно не очень желательны). Браузер может блокировать всю активность до завершения вызова ajax. Независимо от того, обновляет ли браузер экран во время синхронного вызова AJAX, зависит от браузера.

Ваш код был бы намного лучше, если бы он был переписан с использованием только асинхронного ajax. Требуется немного больше работы, чтобы правильно структурировать ваш код для работы с асинхронными вызовами ajax, но браузер остается полностью отзывчивым во время асинхронных вызовов ajax.

Я не совсем уверен, как вы использовали переменную ii в своей первоначальной реализации (поскольку она не была объявлена ​​или инициализирована в коде, который вы включили), но это общая структура, которую вы можете использовать. Он использует традиционный цикл for для сбора всех нужных вам данных в массив, а затем вызывает функцию ajax один раз для этих данных. Мне не ясно, как вы на самом деле что-то делаете с возвращенной информацией AJAX, но, возможно, это не то, что вы включили здесь:

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