0

以下代码从 URL 请求 json 数据。一旦拥有该数据，它就会为 json 数据中的每个元素运行一个 .each 函数。例如，我已将 .each 函数简化为简单地使用 json 中的每个值执行 document.write 并在结束后提醒“已完成”。

如果我删除了 setTimeout，那么代码会正常工作，首先完成所有 .each 命令，然后警报完成。但是，使用 setTimeout，它会在执行所有 .each 命令之前发出警报。

我的延迟本身工作得很好，但是初始延迟之后的代码会立即执行，而不是等待所有 .each 命令执行。这是代码：

$.ajax({
            type: "GET",
            url: 'url to json data',
            dataType: "json",
            success: function(data) {
            var time = 10;
                $.each(data, function(key, val) {
                setTimeout(function() {
                document.write(val.term);
                   return;
                }, time); time += 10;
                });
            alert('finished');
            },
            error: function () {}
        })

如何在迭代 .each 命令时保持延迟，并且仅当它完成迭代所有 .each 命令时，才提示“完成”？

4

2 回答 2

3

你可以做的是在这里使用 jQuery 的延迟。使用承诺，然后在完成后调用回调。

未经测试，但您可以执行以下操作：

$.ajax({
    type: "GET",
    url: 'url to json data',
    dataType: "json",
    success: function(data) {
        var time = 10,
            timeouts = [];
        $.each(data, function(key, val) {
            var def = new $.Deferred;
            timeouts.push(def);

            setTimeout(function() {
               console.log(val.term);
               def.resolve();
            }, time);
            time += 10;
        });

        $.when.apply($, timeouts).done(function(){
            alert('finished');
        });
    },
    error: function () {}
})
于 2013-11-13T22:13:58.590 回答
1

您也可以将警报放在 setTimeout 中，但在每次迭代时重置它，以便它仅在each成功完成时运行。

$.ajax({
        type: "GET",
        url: 'url to json data',
        dataType: "json",
        success: function(data) {
        var time = 10;
        var t=setTimeout(function(){alert('finished');} , 20);
            $.each(data, function(key, val) {
            setTimeout(function() {
            //document.write(val.term);
              clearTimeout(t);
              t=setTimeout(function(){alert('finished');} , 20);
               return;
            }, time); time += 10;
            });
        },
        error: function () {}
    })
于 2013-11-13T22:13:45.307 回答