为什么Javascript输出在Google Chrome中被延迟？

我有javascript/jquery代码，它获取信息并使用while/for循环将其更新到数据库中。在获取时，我有一个div，它显示了当前正在进行的工作的进度日志。在Firefox中，当脚本运行时，它会同时更新div。在GoogleChrome中，它运行整个循环，保留日志，并且只输出它，直到脚本完成运行。有人知道为什么会这样吗

这是我的密码：

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

    }
});

---

您正在使用同步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();
});

$（文档）.ready（函数（）{
添加文本（“测试”）；
var数组_长度=num_集；
var fetchData=[]；
var-fetchIndex=0；
对于（var i=0；i

您正在使用同步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();
});

$（文档）.ready（函数（）{
添加文本（“测试”）；
var数组_长度=num_集；
var fetchData=[]；
var-fetchIndex=0；
对于（var i=0；i

add_text（）？函数add_text（text）{$（“#status_text”）。append（“
”+text）；}如果代码是同步的（看起来是同步的），通常浏览器在当前同步代码完成之前不会重新绘制。如果它是同步的，我很惊讶Firefox会在它完成之前重画。好的，

fetch\u card（）

是一个XHR请求吗？你不应该真的运行一块Javascript，它需要足够长的时间来执行，以至于你一开始就会注意到这一点。（假设

fetch_card

是同步的。）

add_text（）

的代码是什么？函数add_text（text）{$（“#status_text”）。append（
“+text）；}如果代码是同步的（看起来是同步的），通常浏览器在当前同步代码完成之前不会重新绘制。如果它是同步的，我很惊讶Firefox会在我之前重新绘制

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