Занят индикатор состояния гонки в 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

Очистка 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 2

Мне трудно воспроизвести это.

Вот реализация того, что вы делаете:

версия с использованием кэширования: http://jsbin.com/uwuho

версия с быть предотвращено кэширование: (использует параметр, чтобы избежать кэширования) http://jsbin.com/oguvi

Хит F5/Ctrl-F5, чтобы увидеть его. (в частности, с версией, которая предотвращает кеширование)

С или без кеширования ни одна из версий не выполняет то, что вы описали.

Ваша проблема возможно лежит в другом месте.

Answer 3

Есть еще что javascript на странице, которая разбивается? Если это так, это может быть не состояние гонки - JS может просто прекратить выполнение до того, как busyIndicator снова будет скрыт ...

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