3

I'd like to use the setInterval function in jQuery in order to create an alert with the content of one array every 4 seconds. However my alerts show all the values of my array within a short amount of time and it stops for 4 seconds after having displayed all the values.

$.each(['html5', 'EDM', 'Coca Cola', 'creativity'], function(id,value) {
    setInterval(function(){
        alert(value);
    }, 4000);
});

In this case, I'd like to display something like : Alert('html5') - 4 seconds - Alert('EDM') - 4 seconds - Alert('Coca Cola') - 4 seconds - Alert('creativity') - 4 seconds - Alert('html5') - 4 seconds - Alert('EDM') - 4 seconds - ...

4

3 回答 3

5

setInterval从循环中移动。

var arr = ['html5', 'EDM', 'Coca Cola', 'creativity'];
var index = 0;
setInterval(function() {
    console.log(arr[index++ % arr.length]);
}, 4000);​

现场演示
无需 jQuery。

于 2012-10-13T21:04:09.183 回答
4

使用递归setTimeout

var arr = ['html5', 'EDM', 'Coca Cola', 'creativity'];
var alertLoop = function(i) {
    if (arr[i]) {
        alert(arr[i]);
        setTimeout(function(){alertLoop(i+1);}, 4000);
    }
}
alertLoop(0);

演示：http: //jsfiddle.net/B5tJw/

于 2012-10-13T21:06:50.367 回答
1

setInterval不鼓励使用。如需解释，请在此处阅读：http: //bonsaiden.github.com/JavaScript-Garden/#other.timeouts

总结一下问题：

setInterval无论页面上发生了什么，都会定期触发事件。

但是，Javascript 不是多线程的：它一次只能运行一个代码序列。如果setInterval在另一个代码序列正在运行时触发，则新的代码序列将被阻塞，直到前一个代码序列完成，并等待它。

如果这种情况反复发生，您最终可能会遇到大量等待运行的事件。

您alert()用于显示您的消息。alert()导致代码执行序列暂停，直到用户响应消息，但保持锁定状态，以便其他事件无法运行它们的代码。对于 来说，这是一个特殊的问题setInterval，因为它会在指定的时间触发新事件，而不管是否有其他东西阻塞了脚本。

解决方案是使用setTimeout而不是setInterval.

setTimeout只触发一次，但很容易告诉它在自己的函数中再次触发，因此您可以获得与 相同的效果setInterval，但控制更多。您的代码可以等到alert()用户接受之后再触发下一个事件，这意味着您不会遇到可能发生的级联事件的问题setInterval。

希望这有助于解释事情。我在开头提到的链接也很有帮助。

于 2012-10-13T21:17:20.963 回答