クリックイベントでjavascript/jqueryで実行中の機能を停止する

Question

jqueryで特定のクリックイベントを停止したいスライドショー機能があります。スライドショー機能はここにある：

function slider(){ 
    setInterval(function(){ 
    var cur = $('img.active'); 
    cur.fadeOut('fast'); 
    cur.removeClass('active'); 
    cur.css('opacity','0'); 
    cur.addClass("hidden"); 
    var nextimg; 
    if (!cur.hasClass("last")){ 
    nextimg = cur.next("img"); 
    } 
    else { 
    nextimg = cur.prev().prev().prev(); 
    } 
    nextimg.removeClass("hidden").fadeIn('slow').css('opacity','1').addClass('active'); 
    },5000); 
} 

私はキューから私の関数を呼び出し、その後、クリックイベントにキューをクリアすることができ、私はまさにそれをどのように使用できるかを確認してください.queueについて読んではなく、されていますか？私は、たとえそれが可能であっても、それを動作させるための構文を理解しているようには思えません。クリックして実行中の機能を停止するこの方法または別の方法に関するアドバイスがあれば幸いです。

Answer 1

を、それが再帰のsetTimeoutの代わりのsetIntervalを使用することが一般的にお勧めです。私はその変更を加え、いくつかの構文の微調整を行いました。しかし、これはあなたが望むと思うものの基本的な実装です。

// Store a reference that will point to your timeout 
var timer; 

function slider(){ 
    timer = setTimeout(function(){ 
     var cur = $('img.active') 
       .fadeOut('fast') 
       .removeClass('active') 
       .css('opacity','0') 
       .addClass('hidden'), 
      nextimg = !cur.hasClass('last') ? cur.next('img') : cur.prev().prev().prev(); 
     nextimg.removeClass('hidden') 
      .fadeIn('slow') 
      .css('opacity','1') 
      .addClass('active'); 
     // Call the slider function again 
     slider(); 
    },5000); 
} 

$('#someElement').click(function(){ 
    // Clear the timeout 
    clearTimeout(timer); 
}); 

Answer 2

setIntervalの結果を変数に格納します。

次に、clearIntervalを使用してそれを停止します。

Answer 3

ストアsetIntervalによって返される値は、それをクリアするためにintervalIdを言う、あなたのクリックハンドラは次のようになります。それは価値がある何のため

function stopSlider() { 
    //prevent changing image each 5s 
    clearInterval(intervalId); 
    //stop fading the current image 
    $('img.active').stop(true, true); 
}