让setInterval根据数组执行某个动作一定的次数

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);

附言:我放了一个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);

这样，您就不必处理清除超时的问题，也就没有带有闭包捕获问题的全局索引变量了。