Question

我想在setInterval中使用jQuery函数，以便每4秒创建一个包含一个数组内容的警报。但是我的警报会在很短的时间内显示我的数组的所有值，并在显示所有值后停止4秒。

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

在这种情况下，我想显示如下内容：警告（'html5'） - 4秒 - 警报（'EDM'） - 4秒 - 警报（'可口可乐'） - 4秒 - 警报（'创造力'） - 4秒 - 警报（'html5'） - 4秒 - 警报（'EDM'） - 4秒 - ......

Answer 1

从循环移动setInterval。

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

Live DEMO
不需要jQuery。

Answer 2

使用递归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/

Answer 3

不鼓励使用setInterval。有关解释，请阅读：http://bonsaiden.github.com/JavaScript-Garden/#other.timeouts

总结问题：

无论页面上发生了什么，

setInterval都会定期触发事件。

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

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

您正在使用alert()来显示您的消息。 alert()导致代码执行序列暂停，直到用户响应消息，但保持锁定，以便其他事件无法运行其代码。这是setInterval的一个特殊问题，因为它会在指定时间触发新事件，无论其他内容是否阻止该脚本。

解决方案是使用setTimeout代替setInterval。

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

希望有助于解释事情。我在开头提到的链接也非常有用。

带有数组的setInterval

3 个答案: