在 Javascript 中每五秒循环一次

Question

我正在尝试用 JS（或 JQuery）编写一个简单的循环，每五秒更新一次图像，总共 15 秒（所以三个循环），然后退出。

它应该是这样的：

等五秒钟
执行
等五秒钟
执行
等五秒钟
执行
退出

但是 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

您需要 setInterval() 而不是

 setInterval(function(){ alert("Do Something"); }, 3000);

Answer 2

假设您正在使用 jQuery（操纵 DOM），

你可以试试这个：

['img1.jpg', 'img2.jpg', 'img3.jpg'].forEach(function(imgPath, index) {
    // the callback will be executed in 5seconds * (index + 1)
    setTimeout(function() {
       // change image source
       $('img#myImage').attr('src', imgPath);
    }, 5000 * (index + 1));
});

Answer 3

设置超时：

function doSetTimeout(i) {
    if(i >= 3) return;
    alert(i);
    setTimeout((function () {
        return function () {
            doSetTimeout(i);
        };
    })(i + 1), 5000);
}

doSetTimeout(0);

不过你也可以用setInterval，也许更合适。

Answer 4

原因是你的settimeout是同时结束的（5秒后）因为你的超时代码是按5秒计算的

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

您要做的是根据您的索引更改超时时间（因此会有不同的开始时间。

for(var i = 0; i < 3; i++) {
    (function(index) {
        setTimeout(function() { alert(index); }, index*5000);
    })(i);
}

（还需要 3 次迭代，所以为您编辑了循环）

Answer 5

var time = 1;

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

您可以简单地创建一个间隔并在第 3 次后终止它

Answer 6

您可以改用 setInterval 并跟踪您执行函数的次数。不仅仅是使用 clearInterval() 来停止执行。

var i = 1;
var interval = setInterval(function() {
  execute();
}, 5000);

$(document).ready(function() {
  execute();
});

function execute() {
  $("#output").append("set<br/>");

  if (i == 3) {
    clearInterval(interval);
  }
  i++;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='output'></div>

如果您想先等待 5 秒，请不要在 domready 上调用 execute()。

Answer 7

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

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

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

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

Answer 8

轻松一点！不需要循环，只需要执行3次即可。

setTimeout(function() { alert(1); }, 5000);
setTimeout(function() { alert(2); }, 10000);
setTimeout(function() { alert(3); }, 15000);

但是，如果你真的想要一个循环：

function doSetTimeout(i) {
    setTimeout(function() { alert(i); }, i*5000);
}
for (var i = 1; i <= 3; ++i)
    doSetTimeout(i);

在 Javascript 中每五秒循环一次

Loop every five seconds in Javascript

javascript

jquery

loops

delay

settimeout