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