在 Javascript 中每五秒循环一次

Loop every five seconds in Javascript

提问by Chuck Le Butt

I'm trying to write a simple loop in JS (or JQuery) that updates an image every five seconds, for a total of 15 seconds (so three loops), and then quits.

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

It should go like this:

它应该是这样的：

1. Wait five seconds
2. Execute
3. Wait five seconds
4. Execute
5. Wait five seconds
6. Execute
7. Quit

1. 等待五秒钟
2. 执行
3. 等待五秒钟
4. 执行
5. 等待五秒钟
6. 执行
7. 退出

But setTimeoutonly seems to work once.

但setTimeout似乎只能工作一次。

As a test, I've tried:

作为测试，我尝试过：

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

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

Does not work: http://jsfiddle.net/ubruksco/

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

I've also tried:

我也试过：

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

Does not work: http://jsfiddle.net/Ljr9fq88/

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

回答by astian

var time = 1;

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

you can simply create an interval and kill it after the 3rd time

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

回答by astian

Your first example is nearly there. You just need to multiply the time delay by the loop index to get the right delay.

你的第一个例子快到了。您只需要将时间延迟乘以循环索引即可获得正确的延迟。

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

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

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

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

回答by Secret

The reason is that your settimeout ends all at the same time (after 5 seconds) because your timeout code is based on 5 seconds

原因是您的 settimeout 同时结束（5 秒后），因为您的超时代码基于 5 秒

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

What you want to do is changethe timeout time based on your index (hence will have different start times.

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

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

(Also needs 3 iterations, so edited out the loop for you)

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

回答by Filipe Borges

Make it easy! You do not need loop, you just need three executions.

轻松搞定！你不需要循环，你只需要三个执行。

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

But, if you really want a loop:

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

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

回答by User970008

You want setInterval() instead

你想要 setInterval() 代替

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

回答by Eloims

Assuming your are using jQuery (to manipulate the DOM),

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

you can try this:

你可以试试这个：

['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));
});

回答by KyleK

With setTimeout:

使用 setTimeout：

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

doSetTimeout(0);

But you can also use setInterval, maybe more appropriate.

但是你也可以使用setInterval，也许更合适。

回答by Justinas

You can use setIntervalinstead and track how much times you have executed function. Than just use clearInterval()to stop execution.

您可以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>

If you want to first wait 5 secs, don't call execute()on domready.

如果你想先等 5 秒，不要调用execute()domready。