問題與clearInterval

Question

我想創建一個滑塊，其中幻燈片或來自ajax。 其中懸停在滑塊div停止滑塊。 爲此，我創建了一個函數sliderPopulateBlocks（），它調用服務頁面 將幻燈片放在容器中調用函數來移動幻燈片我已使用 函數moveItems（）一個使用setInterval（）的區間。

問題在於停止div上懸停的幻燈片，我正在使用clearInterval（）清除間隔。 它在文檔準備就緒時首先調用時可以正常工作。 但是，當類別點擊調用相同的功能，然後在第二次點擊滑塊不停止懸停。

<script> 
var interval_two; 
function sliderPopulateBlocks(){ 
    $.ajax({ 
     type:"get", 
     url:"service.php", 
     data:{t:"slider"}, 
     dataType:"json", 
     success:function(data,status){ 
      if(status == "success"){ 
       if(data.status == "ok"){      
        var data_arr = data.details; 
        var final_html = ''; 
        $.each(data_arr, function(index,value){ 
         var returned_html = '<div class="popular-column"></div>'; 
         final_html = final_html + returned_html; 
        }); 
        var container = $("#popular-two"); 
        container.html(final_html); 
       } else { 

       } 
      } 
     }, 
     error: function(){ 
      //show the error 
     }, 
     complete: function(){   
      if(total_slides_two > max_item){ 
       moveItems("#popular-two"); 
       interval_two = setInterval(function(){moveItems("#popular-two")}, 5000);     
       $(".popular-two").mouseover(function(){ 
        clearInterval(interval_two); 
       }); 
       $(".popular-two").mouseleave(function(){ 
        interval_two = setInterval(function(){moveItems("#popular-two")}, 5000); 
       }); 
      } 
     } 
    }); 
} 

$(function(){ 
    sliderPopulateBlocks(); 
    $(".category-list ul li").click(function(){ 
     sliderPopulateBlocks(); 
    }); 
}); 
</script> 

<!-- html --> 
<div class="scroll-div popular-one"> 
    <a id="prev-popular-one" href="javascript:void(0);" class="previous-bt">Previous</a> 
    <a id="next-popular-one" href="javascript:void(0);" class="next-bt">Next</a> 
    <div class="scroll-con"> 
     <div class="popular-details" id="popular-one"> <!--popular-details start--> 



     </div> <!--popular-details end--> 
    </div> 
</div> 

Answer 1

setInterval()

返回所創建的間隔的ID。 clearInterval()使用您傳遞給它的ID清除間隔。

可能發生的情況是，設置的間隔越多，但interval_two將僅保留最後一個間隔的ID，這意味着所有其他間隔將繼續運行。

而是保存interval_two = setInterval()的ID添加到陣列中的：

var interval_two = []; 

interval_two.push(setInterval()); 

，然後清除間隔在一個循環：

function clearIntervals(interval_two) { 
    for(var i = 0, len = interval_two.length; i < len; i++) { 
     clearInterval(interval_two[i]); 
    } 
} 

Answer 2

作爲要動態使用ajax使用on和文件ready結合events，而不是在如下面的AJAX調用添加內容：

interval_two = interval_two = setInterval(function() { 
    moveItems("#popular-two"); 
}, 5000); 

$('"#popular-two"').on('mouseenter', '.popular-two', function() { 
    clearInterval(interval_two); 
}).on('mouseleave', '.popular-two', function() { 
    interval_two = setInterval(function() { 
     moveItems("#popular-two"); 
    }, 5000); 
}); 

Answer 3

每當AJAX調用時，您要添加新的mouseover事件處理程序到.popular-two。這意味着它第一次運行時，有一個，第二次有兩個，等等。

這會產生多個間隔的效果，只有最近創建的間隔被存儲爲interval_two。

您可以通過在AJAX調用之外移動mouseover和mouseout來解決此問題。

var interval_two 
function sliderPopulateBlocks(){ 
    $.ajax({ 
     // code not relevant to the answer omitted here 
     complete: function(){   
      if(total_slides_two > max_item){ 
       moveItems("#popular-two"); 
       interval_two = setInterval(function(){moveItems("#popular-two")}, 5000);     
      } 
     } 
    }); 
} 

// move event handlers outside of AJAX to ensure they only get assigned once. 
$(".popular-two").mouseover(function(){ 
    clearInterval(interval_two); 
}); 
$(".popular-two").mouseleave(function(){ 
    interval_two = setInterval(function(){moveItems("#popular-two")}, 5000); 
});