循环在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); 

，你可以简单地创建一个区间和第三时间后杀死它

Answer 2

你想要setInterval（）而不是

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

Answer 3

假设你正在使用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 4

用的setTimeout：

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

doSetTimeout(0); 

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

Answer 5

的原因是你的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 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中​​。

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

使容易！你不需要循环，你只需要执行三次。

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);