Jqueryループの停止ボタン

Question

現在、html5のjqueryループの開始と停止という2つのボタンを設定しています。スタートボタンは完璧に動作しますが、私が試してみると「停止」ボタンは無効のままです。私はループを止めることに関する多くの例を見てきましたが、ボタンの中の問題を解決できないものはありません。申し訳ありませんが、これは簡単な質問ですが、学生としては非常に不満を募らせています。歓声

"use strict"; 

var current_banner_num = 1; 

$(document).ready(function(){ 

    $("#banner-base").css("visibility","hidden"); 
    $("#banner-"+current_banner_num).show(); 

    var next_button = $("#start").button(); 
    var stop_button = $("#stop").button(); 

     next_button.click(function(){ 
      var timer = setInterval(myCode, 2000); 
      function myCode() { 

       //$("#banner-"+current_banner_num).hide(); 
       $("#banner-"+current_banner_num).fadeTo(800, 0); 

       if (current_banner_num == 4) { 
        current_banner_num = 1; 
       } 
       else { 
        current_banner_num++; 
       } 
       $("#banner-"+current_banner_num).fadeTo(800, 1); 
      } 
     }); 
     stop_button.click(function(){ 
      function abortTimer(){ 
      clearInterval(timer); 
     } 
    }); 
}); 

Answer 1

ここで何度も何度も機能を定義しています。ただ、イベントハンドラに機能を取り除く：

stop_button.click(function(){ 
    clearInterval(timer); 
}); 

は、この元の問題のコードは、単に関数を定義しながら、clearInterval()を実行しますが、電話またはあなたが言ったように何もしません。それが解決されることを願っています。

Answer 2

はてclearInterval機能

"use strict"; 

var current_banner_num = 1; 

$(document).ready(function(){ 

    $("#banner-base").css("visibility","hidden"); 
    $("#banner-"+current_banner_num).show(); 

    var next_button = $("#start").button(); 
    var stop_button = $("#stop").button(); 
    var timer = null; 
     next_button.click(function(){ 
      timer = setInterval(myCode, 2000); 
      function myCode() { 

       //$("#banner-"+current_banner_num).hide(); 
       $("#banner-"+current_banner_num).fadeTo(800, 0); 

       if (current_banner_num == 4) { 
        current_banner_num = 1; 
       } 
       else { 
        current_banner_num++; 
       } 
       $("#banner-"+current_banner_num).fadeTo(800, 1); 
      } 
     }); 
     stop_button.click(function(){ 
      clearInterval(timer); 
    }); 
}); 

Answer 3

私はあなたのコードで2つの問題点を持っていると思うのラップを解除、代わりに地元の一つでグローバル変数を使用してください。 timer変数はnext_button.click(function(){ ... });の外には表示されません。これはこの関数にとってローカルなので、少しグローバルにする必要があります。 2番目の問題は、stop_button.click(function(){ ... });では、関数abortTimerを宣言するだけですが、呼び出さないことが一般的です（その関数を宣言する必要はありません）。

"use strict"; 

var current_banner_num = 1; 

$(document).ready(function(){ 

$("#banner-base").css("visibility","hidden"); 
$("#banner-"+current_banner_num).show(); 

var next_button = $("#start").button(); 
var stop_button = $("#stop").button(); 
    var timer = null; 
    next_button.click(function(){ 
     timer = setInterval(function(){ 
      //$("#banner-"+current_banner_num).hide(); 
      $("#banner-"+current_banner_num).fadeTo(800, 0); 

      if (current_banner_num == 4) { 
       current_banner_num = 1; 
      } 
      else { 
       current_banner_num++; 
      } 
      $("#banner-"+current_banner_num).fadeTo(800, 1); 
     }, 2000); 
    }); 

    stop_button.click(function(){ 
     clearInterval(timer); 
    }); 
}); 

またnextButton機能に機能myCodeを宣言する必要がありませんでしたので、私は