JQuery延遲排隊呼叫

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