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

Вопрос ваше использование var в функции startPlaying() - переопределяет сферу переменной runslides. Вам просто нужно удалить это.

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

Лучше, не используйте глобальную переменную в вашем JS-коде. Вы можете разместить ссылку на таймере в атрибуте data на body вместо:

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 аргументы крышки).