循环中的setTimeout

时间:2012-10-21 08:27:47

标签: javascript while-loop settimeout

我已经搜索了如何将setTimeOut与for循环一起使用,但是对于如何在while循环中使用它并没有很多,我不明白为什么应该有很多不同。我已经编写了以下代码的一些变体,但是这个循环似乎会使浏览器崩溃:

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

为什么呢?

基本上我有一个动态创建的图像,其源属性有时需要加载,所以在我显示它之前,我需要继续检查它是否已加载,并且只有当它的路径在{{1}中可用时才需要},然后我显示它。

这个代码在我使用while循环之前工作正常,当我直接使用

$('#currentImage')

但是如果加载速度更快,我不想让用户等待3秒,因此我将setTimeout(function(){ src = $('#currentImage').val(); $("#img_"+imgIdx).attr('src',src); }, 3000); 置于while循环中并缩短其间隔,以便我只检查每半秒加载的路径。这有什么问题?

3 个答案:

答案 0 :(得分:10)

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

希望这有帮助。

答案 1 :(得分:5)

问题可能是你没有每半秒检查一次。

setTimeout计划一个函数在将来运行,但它不会阻塞,它只是稍后运行。因此,在你的while循环中,你安排这些函数的运行速度与迭代while循环一样快,所以你可能正在创建大量的函数。

如果您确实要每半秒检查一次,请使用setInterval而不使用循环。

答案 2 :(得分:4)

谢谢大家 - 所有建议都有所帮助。最后我使用了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);