停止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或阻止其进入下一个区间，即使任务上次间隔不completed.Not为clearInterval，应继续（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); 

注：我没有测试过这个代码。