javascript - Javascript中的繁忙指标竞争条件

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 可以在busyIndi​​cator 再次隐藏之前停止执行......

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