setTimeout 在 while 循环中

Posted 2023-03-15

【中文标题】setTimeout 在 while 循环中

【英文标题】：setTimeout inside while loop

【发布时间】：2012-10-11 08:43:12

【问题描述】：

我已经搜索了如何将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 循环中并缩短了它的间隔，所以我只检查加载每半秒路径一次。这有什么问题？

【问题讨论】：

否，settimeout 将函数作为参数，稍后执行。

@jrdn 我不是在说内部setTimeout，我说的是外部。顺便说一句，实际上不需要函数声明。

啊。那也是。所以，是的，我的答案是错误的。这只是一个普通的旧无限循环！

错了一半。无论如何，他们应该为此使用 setInterval。

@AlvinWong 或者，因为它是一个图像，所以挂钩它的 .onload 处理程序，该处理程序的设计目的是让您知道图像何时完成加载。

【参考方案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.');

希望这会有所帮助。

【参考方案2】：

问题可能是您不是每半秒检查一次。

setTimeout 安排一个函数在未来某个时间运行，但它不会阻塞，它只是稍后运行。因此，在您的 while 循环中，您正在安排这些函数以尽可能快的速度运行，因为它可以迭代 while 循环，因此您可能会创建大量它们。

如果您真的想每半秒检查一次，请改用不带循环的 setInterval。

【讨论】：

setInterval 返回一个 id。当你想停止它时，使用 clearInterval(id);

感谢您的解释。那我拿那个 setInterval 块呢？

不，它不会阻塞。它只是安排函数重复运行，而 setTimeout 只安排它运行一次。由于它会为您再次调用它，因此您不再需要循环。

【参考方案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);  

【讨论】：

确认这个区间确实被清除了。 window.clearInterval 将 intervalID 作为其参数，而不是 函数。

我也是这么想的……但这确实有效。首先在这里的第二个答案中看到它：***.com/questions/109086/…

i = 0; var fn = function() console.log(++i); if(i > 9) console.log('clearing'), clearInterval(fn); ; setInterval(fn, 500); 永远存在。

我将console.log("checking") 放在clearInterval(checker) 之前，但它并没有永远持续下去。

你说得对！我试过了，我可以看到它正在无限检查。我已经根据修复编辑了上面的答案。