jQueryがdivを5秒間表示していない場合、アクションを実行します

Question

イメージスライダを作成しようとしています。さて、私はスライダーの基本的な部分を得ました - 唯一のことは、スライダーが5秒ごとに自動的に新しいピクチャーを表示することです（すでにビルドされています）が、ユーザーがスライダーメニューを表示すると5秒タイマーは停止しません。

これは私のスライダーコードです。

var index = $(this).parent("li").index(); 

     var item_y = $(this).parent("li").offset().top; 
     var item_x = $(this).parent("li").offset().left; 

     $("#slider li a").each(function(){ 
      $(this).removeClass("active"); 
      Cufon.refresh(); 
     }); 

     $(this).addClass("active"); 

     $("#slider_arrow").css({ 
      'top' : item_y, 
      'left' : item_x-109 
     }); 

     $("#slider_image li").hide().each(function(i,v){ 
      if (i == index) { 
       $(this).fadeIn("medium"); 
      } 
     }); 

     Cufon.refresh(); 

これは実際にはオンホーバーアクションです。以下は、5秒ごとに発生するアクションのコードです。

setInterval(function(){ 

     var current_index = $("#slider li a.active").parent("li").index(); 

     var new_index = $("#slider li").eq((current_index+1)); 

     if (new_index.length > 0) 
     { 
      new_index.children("a").mouseover(); 
     } 
     else 
     { 
      $("#slider li:first-child").children("a").mouseover(); 
     } 

    }, 5000); 

は、だから私は何をしたいとすぐに、ユーザが#slider liメニューから項目を触れると5秒間隔をリセットすることです。

どうすればこの問題を解決できますか？

おかげ

Answer 1

あなたは必要なときに、あなたがclearInterval()を呼び出すことができるように間隔ハンドルを保存する必要があります。

var myinterval = setInterval(
    .... 
, 5000); 

$('#slider li').mouseenter(function() { 
    if(myinterval) clearInterval(myInterval); 
}; 

Answer 2

pause-able javascript timeoutの作成方法については、この回答をご覧ください。

正常に動作するはずです。