clearIntervalは間隔をクリアしません

Question

これはかなり簡単です。ボタンをクリックして「setInterval」を開始し、別のボタンをクリックして停止します。停止ボタンは機能しません。

私は同じような質問がたくさんあることを認識していますが、答えが述べられているように私がすでに設定していたと思いました。ここで間隔を正しくクリアするにはどうすればよいですか？

コード：

// declare globally 
 
var runslides; 
 

 
// set up play function 
 
function startPlaying(){ 
 
\t // set interval 
 
\t var runslides = setInterval(slides, 1000); 
 
} 
 

 
// function for set interval to use 
 
function slides(){ 
 
\t $('body').append('<div>Function Ran</div>'); 
 
} 
 

 
// start the interval 
 
$(document.body).on('click', '#start' ,function(event){ 
 
\t startPlaying(); 
 
}); 
 

 
// stop the interval 
 
$(document.body).on('click', '#stop' ,function(event){ 
 
\t clearInterval(runslides); 
 
});

html, body { 
 
    font-family:sans-serif; 
 
    font-size:12px; 
 
    background:#222; 
 
} 
 

 
a:link, a:visited { 
 
    background:#fff; 
 
    text-decoration:none; 
 
    padding:5px; 
 
    display:inline-block; 
 
} 
 

 
div { 
 
    display:inline-block; 
 
    background:#ccc; 
 
    padding:5px; 
 
    margin:5px 5px 0 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    <a href="#" id="start">Click To Start</a> 
 
    <a href="#" id="stop">Click To Stop</a> 
 
    <br>

Answer 1

あなたが再宣言されているvar runslides = setInterval(slides, 1000);ローカルだけで実行します。

runslides = setInterval(slides, 1000); 

Answer 2

問題がstartPlaying()関数内varの使用である - それはrunslides変数のスコープを再定義します。あなたは単にそれを削除する必要があります。

function startPlaying() { 
    runslides = setInterval(slides, 1000); // remove 'var' here 
} 

さらに、JSコードにグローバル変数を使用しないでください。代わりにbodyにdata属性にタイマーのリファレンスを置くことができます：

function startPlaying() { 
 
    $('body').data('slides-interval', setInterval(slides, 1000)); 
 
} 
 

 
function slides() { 
 
    $('body').append('<div>Function Ran</div>'); 
 
} 
 

 
$('body') 
 
    .on('click', '#start', startPlaying) 
 
    .on('click', '#stop', function(event) { 
 
    clearInterval($('body').data('slides-interval')); 
 
    });

html, 
 
body { 
 
    font-family: sans-serif; 
 
    font-size: 12px; 
 
    background: #222; 
 
} 
 
a:link, 
 
a:visited { 
 
    background: #fff; 
 
    text-decoration: none; 
 
    padding: 5px; 
 
    display: inline-block; 
 
} 
 
div { 
 
    display: inline-block; 
 
    background: #ccc; 
 
    padding: 5px; 
 
    margin: 5px 5px 0 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="#" id="start">Click To Start</a> 
 
<a href="#" id="stop">Click To Stop</a> 
 
<br>

Answer 3

問題の関数スコープ内でrunslidesを再定義することは、これまでの回答で取り上げられています。スライドショーを複数回開始することは、停止スライドが決定的に機能するように防止する必要があります。

E.G.読みやすくするためrunslidesを初期化：スライドショーが実行されている場合は起動するクリックを無視する

var runslides = 0; // in global or outer function scope 

変更startPlaying：

function startPlaying() { 
    if(!runslides){ 
     runslides = setInterval(slides, 1000); 
    } 
} 

とインターバルタイマIDをクリアするには、ストップ演奏ハンドラを取得：

// stop the interval 
$(document.body).on('click', '#stop' ,function(event){ 
    if(runslides) { 
     clearInterval(runslides); 
     runslides = 0; 
    } 
}); 

（ここで真実であることを指摘したrunslidesは大部分がドキュメンタリーです：clearIntervalは単にinvaを無視します蓋の議論）。