작업을 수행 할 때까지 setInterval을 중지 하시겠습니까?

Question

우리가 멈출 수도 있습니다. setInterval은 첫 ​​번째 이벤트가 완료 될 때만 다음 간격이 호출됨을 의미합니다.

이전 이미지가로드되었을 때만 다음 이미지를로드하고 싶습니다.이 이벤트는 마우스 오버 후에 만 ​​작동합니다. 그러나 다음 이미지 크기가 클 경우 다음 간격이 내 경우에 호출됩니다. 마지막까지 간격을 멈추고 싶습니다. 이미지가로드되지 않았습니다.

jQuery('.product').on('mouseover', function(){ 
    timer = setInterval(function() { 
     if (counter === product_images.length) { 
      counter = 0; 
     } 

     // selector.addClass('hidden'); 
     loading_image.removeClass('hidden'); 
     selector.attr('src', 'localhost/product/' + product_images[counter]); 
     var loadImage = new Image(); 
     loadImage.src = selector.attr('src'); 
     loadImage.onload = function() {console.log('after load'); 
     loading_image.addClass('hidden'); 
     // selector.removeClass('hidden'); 
     selector.show(); 
    }; 
    counter = counter + 1; 
}, 1000); 

우리가 setInterval을 중지 또는 마지막 간격도 작업을 위해 clearInterval에 대한 completed.Not되지 않은 다음 간격을 이동을 방지 할 수 있습니다 방법, 그것은 (setInterval을)를 계속해야한다 첫번째 경우 :

이

내 코드입니다 작업이 완료되었습니다.

도와주세요.

Answer 1

아래 코드를 사용해보십시오. 이게 작동 할 수도 있습니다.

var flag = 1; 
jQuery('.product').on('mouseover', function(){ 
    if(typeof timer != "undefined") 
     clearInterval(timer); 
    timer = setInterval(function() { 
     if(flag){ 
      if (counter === product_images.length) { 
       counter = 0; 
      } 
      loading_image.removeClass('hidden'); 
      selector.attr('src', 'localhost/product/' + product_images[counter]); 
      flag = 0; 
      var loadImage = new Image(); 
      loadImage.src = selector.attr('src'); 
      loadImage.onload = function() { 
       console.log('after load'); 
       loading_image.addClass('hidden'); 
       selector.show(); 
       flag = 1; 
      }; 
      counter = counter + 1; 
     } 
}, 1000); 

참고 :이 코드는 테스트하지 않았습니다.