setTimeout創建一個無限循環

我試圖通過更改img標記的src逐一隨機顯示不同的圖像。setTimeout創建一個無限循環

<img src="dravid-young.jpg" width="350" height="460"> 
<script type="text/javascript"> 

var a= new Array ("dravid-childhood.jpg", "dravid-young.jpg", "Jellyfish.jpg", "Tulips.jpg" , "Lighthouse.jpg" , "Penguins.jpg"); 

$(document).ready(function(){ 
    var rand = a[Math.floor(Math.random()*a.length)]; 
    changeimage(a[Math.floor(Math.random()*a.length)]); 
}); 


function changeimage(imag) 
{ 
    $("img").attr("src",imag); 
    setTimeout(changeimage(a[Math.floor(Math.random()*a.length)]), 5000); 
} 

</script>

但它看起來像創建了一個無限循環，頁面不斷加載！

來源

2013-10-14 raju

...因爲你打電話'setTimeout'每次都有'changeimage' –

你的'changeimage'函數無條件地調用'c hangeimage' - 你期望什麼？你的代碼實際上並沒有調用'setTimeout'直到'changeimage'返回 - 它永遠不會做。 –

更不用說，當你只需要一次的時候，你想在你的代碼中選擇一個隨機圖像索引3次 – Basic

傳遞一個調用你的函數的函數，而不是直接調用你的函數。

setTimeout(function() { 
    changeimage(a[Math.floor(Math.random()*a.length)]); 
}, 5000);

您立即調用changeimage，它不立即遞歸而不是等待。

通過傳遞調用changeimage的函數，它將在調用它之前等待5000ms。

要清楚，我只是替換了上面的錯誤代碼。其餘的應該留在原地。這是最後一個例子。

function changeimage(imag) { 
    $("img").attr("src",imag); 

    setTimeout(function() { 
     changeimage(a[Math.floor(Math.random()*a.length)]); 
    }, 5000); 
}

來源

2013-10-14 16:00:00 user2736012

實際上，它沒有傳遞任何返回值，因爲在遞歸之前引發了「超過最大調用堆棧大小」異常:-) – Bergi

@Bergi：你是對的。我已經更新。從概念上講，如果它被允許返回，但它從來沒有到達遞歸調用的那一點。 – user2736012

感謝user2736012，但我想重複顯示圖像，它只會更改圖像一次。 – raju

當你從同一個函數中調用一個函數時，它會創建一個循環，如果你不停止它，這是一個無限循環。

來源

2013-10-14 15:58:58 VoronoiPotato

感謝VoronoiPotato，問題是我誤解了setTimeout函數的用法。 – raju

問題是你在每個changeimage調用中調用changeimage，所以你將面臨一個循環。

但是你執行一個功能每個間隔，所以你可以使用setInterval

https://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval

像：

var a = new Array("http://placehold.it/200x200", "http://placehold.it/500x500", "http://placehold.it/300x300", "http://placehold.it/400x400", "http://placehold.it/300x300", "http://placehold.it/200x200"); 

var intervalID = window.setInterval(changeimage, 1000); 

function changeimage() {  
    $("img").prop("src", a[Math.floor(Math.random() * a.length)]);  
    console.log($("img").prop("src")) 
}

演示：http://jsfiddle.net/IrvinDominin/Xggb5/2/

來源

2013-10-14 16:08:42

是的，'setInterval'在這種情況下更適合。 – Brewal

加入更好的例子:-) –

感謝朋友們，好像我誤解了setInterval函數的用法，謝謝user2736012你的代碼工作正常。但它只改變圖像一次，我希望圖像每5秒重複更換一次。 – raju

setTimeout創建一個無限循環

回答

相關問題