Javascript clearInterval с нажатием кнопки

Question

У меня проблемы с получением clearInterval для работы, когда я пытаюсь привязать его к нажатию кнопки. Кроме того, по-видимому, функция начинает по себе ... Вот мой код

var funky = setInterval(function() { 
    alert('hello world'); 
}, 2000); 

$('#start').click(function() { 
    funky(); 
}); 
$('#stop').click(function() { 
    clearInterval(funky); 
}); 

Here's a js fiddle

Answer 1

Вы забыли добавить jquery библиотеку и сделали неправильно назначение, она должна быть внутри функции обратного вызова.

Рабочий пример:

var funky; 
 

 
$('#start').click(function() { 
 
    funky = setInterval(function() { 
 
    alert('hello world'); 
 
    }, 2000); 
 
}); 
 

 
$('#stop').click(function() { 
 
    clearInterval(funky); 
 
});

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

Answer 2

Вы экономите неверное значение. Попробуйте это:

var funky = function() { 
    alert('hello world'); 
} 

var funkyId = setInterval(funky, 2000); 

$('#start').click(function() { 
    funky(); 
}); 
$('#stop').click(function() { 
    clearInterval(funkyId); 
}); 

Answer 3

Прежде всего, да, когда вы назначаете переменную функции, она сама вызывает.

Во-вторых, события вашего клика не работают, потому что вам нужно назначить интервал переменной на клик, а не вызывать функцию - нет функции для вызова, как вы могли бы видеть, посмотрели ли вы на консоль разработчика.

И, наконец, хорошая практика заключается в том, чтобы обернуть код jQuery в функцию готовности документа, чтобы все обработчики событий были привязаны должным образом.

$(function() { 
    var funky; 
    $('#start').click(function() { 
    funky = setInterval(function() { 
     alert('hello world'); 
    }, 1000); 
    }); 

    $('#stop').click(function() { 
     clearInterval(funky); 
    }); 
});