Javascript中繁忙的指标竞争条件

时间:2009-05-21 14:54:28

标签: javascript jquery race-condition

我有以下(javascript / jquery)代码,用于在加载图片时显示忙碌指示符(延迟后):

function imgUpdate(arg) {
    var loaded = false;

    $("#image").one("load", function(){
        loaded = true;
        $("#busyIndicator").hide();
    });

    setTimeout(function(){
        if (!loaded) {
            $("#busyIndicator").show();
        }
    }, 250);

    $("#image")[0].src = arg;
}

有时,指标出现并保持不变。如果浏览器的javascript引擎是单线程的,这怎么可能? (顺便说一句,这是在Firefox 3上。)

一个注意事项:当加载的图像已经被缓存时,似乎会发生这种情况。

另一个注意事项:如果我登录到我的firebug控制台,imgUpdate中的所有行都会被执行,但onload处理程序中的日志消息永远不会在后续的imgUpdate调用中打印出来。

4 个答案:

答案 0 :(得分:1)

清除图像的src标记似乎可以解决问题:

function imgUpdate(arg) {
    var loaded = false;

    $("#image").one("load", function(){
        loaded = true;
        $("#busyIndicator").hide();
    });

    setTimeout(function(){
        if (!loaded) {
            $("#busyIndicator").show();
        }
    }, 250);

    $("#image")[0].src = "";
    $("#image")[0].src = arg;
}

答案 1 :(得分:1)

我很难复制这个。

以下是您正在做的事情的实施:

使用缓存的版本: http://jsbin.com/uwuho

阻止缓存的版本:(使用参数来避免缓存) http://jsbin.com/oguvi

按F5 / Ctrl-F5查看它。 (特别是防止缓存的版本)

无论有没有缓存,版本都没有按照您的描述进行操作。

您的问题可能位于其他地方。

答案 2 :(得分:1)

页面上还有其他任何javascript打破了吗?如果是这样,这可能不是竞争条件 - JS可能会在busyIndi​​cator再次被隐藏之前停止执行...

答案 3 :(得分:0)

您可能希望清除回调中的超时,以便在加载图像时不会触发。

var timer = null;
function imgUpdate(arg) {
    var loaded = false;
    timer = setTimeout(function(){ 
        $("#busyIndicator").show();
        timer = null;
    }, 250);        
    $("#image").one("load", function(){
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
        $("#busyIndicator").hide();
    });
    $("#image")[0].src = arg;
}