setTimeout在while循環內

Question

我已經搜索過如何將setTimeOut與for循環一起使用，但是在while循環中如何使用它卻沒有很多，而且我也看不出為什么應該有很大的不同。 我編寫了以下代碼的一些變體，但此循環似乎使瀏覽器崩潰：

while(src == '')
{ 
    (function(){
        setTimeout(function(){
        src = $('#currentImage').val();
        $("#img_"+imgIdx).attr('src',src);
        }, 500);
     });
} 

為什么？

基本上，我動態創建了一個圖像，其源屬性有時需要花費一些時間來加載，因此在顯示它之前，我需要繼續檢查是否已加載該圖像，並且僅當其路徑在$('#currentImage')可用時，然后顯示它。

在使用while循環之前以及直接使用該代碼之前，這段代碼運行良好

setTimeout(function(){
    src = $('#currentImage').val();
    $("#img_"+imgIdx).attr('src',src);
}, 3000);

但是我不想讓用戶等待3秒，如果加載可能會更快，因此我將setTimeOut放入while循環中並縮短了其間隔，因此我僅每半秒檢查一次加載的路徑。 怎么了

Answer 1

while循環正在制造麻煩，就像jrdn指出的那樣。 也許您可以將setInterval和setTimeout結合使用，並且一旦src被填充，請清除間隔。 我在此處放置了一些示例代碼來提供幫助，但是不確定它是否完全符合您的目標：

    var src = '';
    var intervalId = window.setInterval(
        function () {

            if (src == '') {
                setTimeout(function () {
                    //src = $('#currentImage').val();
                    //$("#img_" + imgIdx).attr('src', src);
                    src = 'filled';
                    console.log('Changing source...');
                    clearInterval(intervalId);
                }, 500);
            }
            console.log('on interval...');
        }, 100);

    console.log('stopped checking.');

希望這可以幫助。

Answer 2

問題可能是您沒有每半秒檢查一次。

setTimeout計划某個函數在將來的某個時間運行，但它不會阻塞，而只會在以后運行。 因此，在while循環中，您要安排這些函數的運行速度使其盡可能快地遍歷while循環，因此您可能要創建大量的函數。

如果您實際上想每半秒檢查一次，請使用不帶循環的setInterval。

Answer 3

謝謝大家-所有建議都得到了幫助。 最后，我使用setInterval如下：

var timer;
// code generating dynamic image index and doing ajax, etc
var checker = function() {
    var src = $('#currentImage').val();
    if(src !== '') {
    $('#img_' + imgIdx).attr('src', src);
        clearInterval(timer);
    }
};

timer = setInterval(checker, 500);