Besetztanzeige Race-Bedingung in Javascript

Question

Ich habe folgenden (Javascript / jquery) Code eine Besetztanzeige zeigen (nach einer Verzögerung), während ein Bild Laden ist:

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

Manchmal kommt der Indikator nach oben und bleibt oben. Wie ist das möglich, wenn die JavaScript-Engine des Browsers single-threaded ist? (Dies ist auf Firefox 3, übrigens.)

Ein Hinweis: Dies scheint zu passieren, wenn das Bild geladen wird bereits im Cache gespeichert

.

Noch ein Hinweis:. Wenn ich meine Firebug-Konsole anmelden, alle Zeilen in imgUpdate ausgeführt werden, aber eine Protokollmeldung in der onload-Handler druckt nie auf nachfolgende Aufrufe imgUpdate

Answer 1

Löschen des src-Tag des Bildes scheint das Problem zu beheben:

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 2

Gibt es eine andere Javascript auf der Seite, bricht? Wenn ja, kann dies nicht eine Race-Bedingung sein - JS einfach ausführen könnte stoppen, bevor der BusyIndicator wieder versteckt ...

Answer 3

Ich bin diese schwer zu replizieren.

Hier ist die Umsetzung dessen, was Sie tun:

Eine Version mit Caching: http://jsbin.com/uwuho

Eine Version mit Caching verhindert wird: (verwendet Parameter Caching zu vermeiden) http://jsbin.com/oguvi

Hit F5 / Ctrl-F5 zu sehen, es gehen. (Insbesondere mit der Version, das Caching verhindert)

Mit oder ohne Zwischenspeicherung weder Version tut, was Sie beschrieben hat.

Ihr Problem wahrscheinlich woanders liegt.

Answer 4

Sie können den Timeout in Ihrem Rückruf löschen möchten, so dass sie nicht ausgelöst wird, wenn das Bild geladen wird.

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