Question

我有以下（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调用中打印出来。

Answer 1

我很难复制这个。

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

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

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

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

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

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

Answer 2

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

Answer 3

清除图像的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;
}

Answer 4

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

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;
}

Javascript中繁忙的指标竞争条件

4 个答案: