JQuery 지연 대기 + 대기 호출

Question

이미지가있는 이벤트 스트림이 실시간으로 표시되는 페이지가 있습니다. 실시간으로 (이벤트가 발생하면) 저장 장치에 이미지가 아직 업로드되지 않아 이미지를 사용할 수 없습니다. 새로운 이벤트를 얻을 수

통화 초에 한 번씩 실행하고 있으며, 각각의 호출은 (20 개) 이벤트 (최신 20)까지 반환 할 수 있지만, 보통은 잠재적으로 0과 5

인해 이미지의 문제에있어

<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 번까지 다시 시도 : 처음에로드되지, onerror 사용하는 기능입니다.

불행히도 실제로는 (실제로 다수의 이미지가 처음에 동시에로드되지 않는 경우) 표시되는 이미지 중 하나가 다른 이벤트에 속합니다. 어느 날 내가 delay()과 queue() 기능을 오용하고 있다고 생각하게합니까?

의견이 있으십니까?

Answer 1

실은 있습니다. delay 및 queue은 jQuery 효과와 함께 사용하기위한 것입니다. the documentation에서 인용 :

.delay() 방법은 대기 jQuery를 효과 사이의 지연에 가장 적합합니다. 제한적이기 때문에 예를 들어, 지연을 취소하는 방법을 제공하지 않습니다. .delay()은 특정 사용에 더 적합 할 수있는 JavaScript의 기본 setTimeout 기능을 대신하지 않습니다. 사례.

저는 이것이 정확하게 그러한 사용 사례라고 생각합니다! 이 질문 (.delay`내 사용()`와`.queue() ')에 따라 정확했다 나는이 대답은 올바른 표시 - - 참고

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