JQuery delayed + queued calls

Question

У меня есть страница, в которой поток событий с изображениями отображается в режиме реального времени. Поскольку он находится в режиме реального времени (по мере того, как происходит событие), возможно, изображение еще недостаточно доступно, поскольку оно все еще загружается на хранение.

вызовов, чтобы получить новые события выполняются каждые несколько секунд, и каждый вызов может вернуть до 20 событий (последние 20), но обычно это от 0 до 5.

В связи с выпуском изображений потенциально не загружается первоначально, то используется функция onerror:

<img onerror="retryImage(this, 'imageUrl', 0)" src="imageUrl" /> 

function retryImage(source, url, attempts) { 
    img = new Image(); 
    img.src = url + '?' + (new Date()).getTime(); 
    img.onload = function() { 
     source.src = img.src; 
    }; 
    img.onerror = function() { 
     if (attempts > 4) { 
      source.src = 'not_found.png'; 
     } else { 
      source.src = 'loading.gif'; 
      attempts++; 
      $(this).delay(2000).queue(function() { 
       retryImage(source, url, attempts); 
       $(this).dequeue(); 
      }); 
     } 
    }; 
    return true; 
} 

идея заключается в том, чтобы попытаться загрузить изображение, а если это не удается, подождите пару секунд и попробуйте еще раз, до 5 раз.

К сожалению, на практике время от времени (когда несколько изображений не загружаются изначально в одно и то же время), одно из отображаемых изображений будет принадлежать другому событию. Что заставляет меня думать, что я злоупотребляю функциями delay() и queue()?

Любые мысли?

Answer 1

Вы действительно, delay и queue предназначены для использования специально с эффектами jQuery. Цитируя the documentation:

Метод .delay() лучше для задержки между очереди JQuery эффектов. Поскольку он ограничен - он, например, не предлагает способ отменить задержку .delay() не является родным для JavaScript setTimeout функция, которая может быть более подходящей для определенного использования .

Я считаю, что это именно такой случай использования! Попробуйте что-то вроде:

function retryImage(source, url, attempts) { 
    img = new Image(); 
    img.src = url + '?' + (new Date()).getTime(); 
    img.onload = function() { 
    source.src = img.src; 
    }; 
    img.onerror = function() { 
    if (attempts > 4) { 
     source.src = 'not_found.png'; 
    } else { 
     source.src = 'loading.gif'; 
     attempts++; 
     setTimeout(function() { 
     retryImage(source, url, attempts); 
     }, 2000); 
    } 
    }; 
    return true; 
}