Question

以下代码从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命令后，才会保持延迟？警告'已完成'？

Answer 1

你可以做的是在这里使用jQuery的延迟。使用promise，然后在完成所有操作后调用回调。

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

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

Answer 2

您也可以将警报放在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 () {}
    })

将setTimeout合并到jQuery .each中

2 个答案: