在 $.each 迭代之间暂停 5 秒答案

【问题标题】：Pause for 5 seconds between $.each iterations在 $.each 迭代之间暂停 5 秒
【发布时间】：2015-02-24 14:35:04
【问题描述】：

我认为我在短时间内拨打了太多电话，导致 Web 服务超时。我想在我的 jquery 中的 $.each 循环的每次迭代之间等待大约 5 秒。

看看我有什么：

function submitMyList(myList) {
    $.each(JSON.parse(myList), function (key, value) {
        setTimeout( function(){ 
            $.ajax({
                type: 'POST',
                url: '@Url.Action("submitMyList", "myController")',
                dataType: 'html',
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify(//passing my values),
                success: function (result) {
                    //success code
                },
                error: function (result) {
                    //error code
                },
                complete: function () {
                    //completion code
                }

            });
        }, 5000)     
    });
}

这还是执行得非常快，一个接一个。

【问题讨论】：

不要尝试每五秒发出一次相同的请求，而是等到前一个请求完成后再发出下一个请求。
@zzzzBov 我真的不想那样做。每个请求可能需要大约 1-2 分钟才能完成。我的列表可能长达 70 条左右。因此，以这种方式执行提交可能需要很长时间。

标签： javascript jquery ajax loops

【解决方案1】：

发生的情况是，当您运行“每个”时，您立即设置了很多计时器，所有等待 5 秒，然后同时运行。这是因为 each 只是想尽快完成它的循环，并且它运行它的所有函数（包括“setTimeout”函数）。它不需要等待任何东西，所以运行并设置了很多超时:)

最简单的解决方案是让 setTimeout 等待 5000 * num 毫秒，并在每个循环中增加 num，如下所示：

function submitMyList(myList) {
  var num = 0;
  $.each(JSON.parse(myList), function (key, value) {
    num++;
    setTimeout( function(){ 
        $.ajax({
            type: 'POST',
            url: '@Url.Action("submitMyList", "myController")',
            dataType: 'html',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(//passing my values),
            success: function (result) {
                //success code
            },
            error: function (result) {
                //error code
            },
            complete: function () {
                //completion code
            }

        });
    }, 5000*num);     
  });
}

【讨论】：

它应该可以工作，看看 JSFiddle 中的这个最小测试：jsfiddle.net/cy0uqLnj 添加到我的答案中，更好的是使用“成功”来设置一个新的计时器，优势是你如果通话有延迟，则没有“堆积”通话的风险。缺点是如果请求失败，一切都会停止。
我很抱歉这确实有效，我让自己有点转身。我仍然对它为什么起作用感到有些困惑。第一个短语的工作让我有点困惑。
没问题，很高兴它有效。已经澄清了我的答案，希望对您有所帮助。

【解决方案2】：

这种方法可以奏效：

$(document).ready(function () {
    var a = new Array("Apples", "Bananas", "Oranges")
    jQuery.each(a, function (idx, val) {
        setTimeout(function() {
            console.log("At "+idx+" Val "+val)
        }, idx * 5000);
    })
})

在你的具体情况下试试这个：

function submitMyList(myList) {
    var idx = 0;
    $.each(JSON.parse(myList), function (key, value) {
        setTimeout( function(){ 
            $.ajax({
                type: 'POST',
                url: '@Url.Action("submitMyList", "myController")',
                dataType: 'html',
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify(//passing my values),
                success: function (result) {
                    //success code
                },
                error: function (result) {
                    //error code
                },
                complete: function () {
                    //completion code
                }

            });

        }, idx*5000)
        idx++;     
    });
};

此处的示例：http://jsfiddle.net/1w6uxLxs/1/

想法您必须将超时乘以迭代次数，因为正在发生的事情是超时设置一个接一个（基本上同时），因为发生的是循环遍历所有元素并且对于每个元素您指示浏览器（@ 987654325@) 在一定时间后执行一个函数。通过将此时间量乘以索引，您可以获得“延迟”效果。看看这个例子中控制台发生了什么：http://jsfiddle.net/1w6uxLxs/2/

【讨论】：

感谢您的帮助，这确实很有魅力。您介意解释一下为什么每次循环迭代时我都必须乘以 idx 吗？
我更新了答案，试图解释这个想法。让我知道是否清楚。