在Javascript中每五秒循环一次

Question

我正在尝试在JS(或JQuery)中编写一个简单的循环,每隔五秒更新一次图像,总共15秒(所以三个循环),然后退出.

它应该是这样的:

1. 等五秒钟
2. 执行
3. 等五秒钟
4. 执行
5. 等五秒钟
6. 执行
7. 放弃

但setTimeout似乎只工作过一次.

作为测试,我尝试过:

function doSetTimeout(i) {
  setTimeout(function() { alert(i); }, 5000);
}

for (var i = 1; i <= 5; ++i)
  doSetTimeout(i);

不起作用:http://jsfiddle.net/ubruksco/

我也尝试过:

for(var i = 1; i <= 5; i++) {
    (function(index) {
        setTimeout(function() { alert(index); }, 5000);
    })(i);
}

不起作用:http://jsfiddle.net/Ljr9fq88/

Answer 1

var time = 1;

var interval = setInterval(function() { 
   if (time <= 3) { 
      alert(time);
      time++;
   }
   else { 
      clearInterval(interval);
   }
}, 5000);

你可以简单地创建一个间隔并在第3次之后将其杀死

Answer 2

您的第一个示例即将完成。您只需将时间延迟乘以循环索引即可获得正确的延迟。

function doSetTimeout(i) {
  setTimeout(function() { alert(i); }, 5000*i);
}

for (var i = 1; i <= 3; ++i)
  doSetTimeout(i);

http://jsfiddle.net/ubruksco/3/