Question

我试图通过setInterval（）每10ms迭代一次数组中的值。

但是因为计算机无法快速处理迭代，我的clearInterval（）实际上是在数组完全迭代之前清除了间隔。

以下只是我正在做的事情的一个例子，而不是更加CPU密集的实际代码。

如何修复代码，使其无论CPU性能如何都会迭代到最后？

var blah = ['a','b','c'];
i=0;

int = setInterval(function(){   
    console.log(blah[i]);
    i++;
},10);

timeout = setTimeout(function(){
    clearInterval(int);
}, blah.length * 10);

Answer 1

使用此

var blah = ['a','b','c'];
var i=0;

var intervalId = setInterval(function(){   
    console.log(blah[i]);
    i++;
    if(i==blah.length){ // i== 3 all array elements processed. then clear interval
      clearInterval(intervalId );
    }
},10);

工作示例http://jsfiddle.net/B8ya3/

Answer 2

我会按照

的方式去做

var inter, 
    blah = ['a','b','c','d','e'],
    i=0;
inter = setInterval(function(){   
    console.log(blah[i]);
    i++;
    if (i === blah.length) {
        clearInterval(inter);
    }
},1);

P.S：我放了一个ms因为10ms对我来说很好。

Answer 3

我会这样解决：

var blah = ['a','b','c'];

function iterate(index) {
    console.log(blah[index]);
    if(index < blah.length - 1) {
        setTimeout(function() {iterate(++index)}, 10);
    }
}

iterate(0);

然后你不必处理清除超时问题，也没有关闭捕获问题的全局索引变量。

Answer 4

我个人不想使用setInterval来做你想做的事情。如果你的目标是限制进程，意味着在给定时间只处理一次迭代，并在下一个进程交互之前添加一个延迟，则setInterval＆＃39;不能强制执行。它只能确保每个进程迭代以固定的间隔开始。

我就是这样做的：

<script>

var items = [1, 2, 3, 4, 5];

function processOffersOneAtATime() {
    if (items.length != 0) {
        var item = items.pop();
        setTimeout(function() {
         console.log(item);
         //do time consuming cpu intensive operation here
         processOffersOneAtATime();
        }, 1000);
    }
}
//kick start the process
 processOffersOneAtATime();
 </script>

获取setInterval以基于数组执行一定次数的操作

4 个答案: