javascript - 为什么 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();
});