6

我已经搜索了如何使用setTimeOutfor 循环,但是关于如何将它与 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 循环并缩短了它的间隔,这样我只每半秒检查一次加载的路径。那有什么问题?

4

3 回答 3

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

希望这可以帮助。

于 2012-10-21T09:21:56.593 回答
5

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

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

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

于 2012-10-21T08:32:03.373 回答
5

谢谢大家 - 所有的建议都有帮助。最后我使用 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);  
于 2012-10-21T09:26:26.970 回答