在jquery中的特定时间间隔内停止每次迭代的.each执行？答案

【问题标题】：Stopping .each execution on every iteration for a spesific time interval in jquery?在jquery中的特定时间间隔内停止每次迭代的.each执行？
【发布时间】：2012-09-12 20:30:32
【问题描述】：

我正在尝试在我的 javascript 中创建以下功能：

$("mySelector").each(function(){

// Do something (e.g. change div class attribute)   
// call to MyFunction(), the iteration will stop here as long as it will take for myFunction to complete

});

function myFunction() 
{   
 // Do something for e.g. 5 seconds 
}

我的问题是如何在 myFunction() 期间停止每次迭代？

【问题讨论】：

只要 myFunction 是同步的，那应该不是问题，因为只有一个线程，而且 javascript 通常是同步的，所以它会在下一个循环开始之前等待类更改无论如何。
在您等待时，浏览器被冻结。在 JavaScript 中同步、长时间运行的进程不是一个好主意。

标签： javascript jquery time each intervals

【解决方案1】：

不，这是不可能的。您必须对其进行不同的编码，可能使用基于 .each 的当前索引的 setTimeout。

$("mySelector").each(function(i){

    // Do something (e.g. change div class attribute)   
    // call to MyFunction(), the iteration will stop here as long as it will take for myFunction to complete
    setTimeout(myFunction,i*5000);

});

function myFunction() 
{   
 // Do something for e.g. 5 seconds 
}

编辑：您也可以通过排队来做到这一点：http://jsfiddle.net/9Bm9p/6/

$(document).ready(function () {
    var divs = $(".test");
    var queue = $("<div />");

    divs.each(function(){
        var _this = this;
        queue.queue(function(next) {
            myFunction.call(_this,next); 
        });
    });
});

function myFunction(next) {    
    // do stuff
    $(this).doSomething(); 

    // simulate asynchronous event
    var self = this;
    setTimeout(function(){
        console.log(self.id);
        // go to next item in the queue
        next();
    },2000);

}

【讨论】：

但是setTimeout 并没有真正保持通话.. 他的.each 将继续进行下一次迭代
@Vega 对，但是函数本身会以正确的顺序调用，每 5 秒一次，直到它们都被迭代。
@Vega see i*5000 第一个将被立即调用，第二个在 5 秒后调用，第三个在 10 秒后调用，等等。
@KevinB 明智地继续前进i*5000 完全错过了那个。是的，注意到了……哦等等，但这不包括在他的.each 中执行的代码；）
@ianpgall 解决这个问题的唯一方法是不使用它们中的任何一个（setTimeout/setInterval），而是使用将运行 myfunction 的排队系统，但 myfunction 必须指示返回到排队系统在每一步运行。

【解决方案2】：

这是一个 jsFiddle，我认为它可以满足您的需求：

http://jsfiddle.net/9Bm9p/2/

您只需将选择器替换为您使用的选择器。

正在发生的“循环”将等待myFunction 完成，然后再继续下一个元素。我在myFunction 中添加了 setTimeout 来模拟它需要一段时间。如果您使用的是异步事物，例如 AJAX 请求，则需要将对 myFunction 的调用放在 complete 方法内...或动画回调中。

但是正如有人已经评论过的那样，如果myFunction 中的所有内容都是同步的，那么您应该可以照原样使用它。如果您希望这个过程是异步的，或者如果 myFunction 中的内容是异步的，则不能使用 for 循环或 .each()。

【讨论】：

【解决方案3】：

(function () {
    "use strict";

    var step = 0;
    var content = $("mySelector");
    var max = content.length;
    var speed = 5000; // ms


    var handle = setInterval(function () {
        step++;
        if (step >= max) {
            clearInterval(handle);
        } else {
            var item = content[step];
            // do something
        }
    }, speed);
}());

setInterval 将每 n 毫秒执行一次，clearInterval 将在您完成后停止它。这不会锁定浏览器（前提是您的“做某事”也没有）。 易碎：它假定$("mySelector") 的结果在任务期间有效。如果不是这种情况，则在 do something 中再次验证 item。

【讨论】：