Start & stop/pause setInterval с javascript, jQuery
Я пытаюсь сделать паузу, а затем играть, цикл setInterval
.
После того, как я остановил цикл, кнопка "start" в моя попытка не работает:
HTML:
<input type="number" id="input" />
<input type="button" onclick="clearInterval(add)" value="stop"/>
<input type="button" onclick="start()" value="start"/>
JS:
input = document.getElementById("input");
function start() {
add = setInterval("input.value++",1000);
}start();
Есть ли лучший способ для этого? Ваш бесплатный jQuery.
Спасибо!
Ответы
Ответ 1
Причина, по которой вы видите эту конкретную проблему:
jsFiddle обертывает ваш код в функции, поэтому start()
не определяется в глобальной области.
![enter image description here]()
Мораль истории: не используйте встроенные привязки событий. Используйте addEventListener
/attachEvent
.
Другие примечания:
Пожалуйста, не передавать строки в setTimeout
и setInterval
. Он eval
скрывается.
Используйте функцию вместо этого, и получите уют с var
и пробелом:
var input = document.getElementById("input"),
add;
function start() {
add = setInterval(function () {
input.value++;
}, 1000);
}
start();
Ответ 2
См. Рабочее демо на jsFiddle: http://jsfiddle.net/qHL8Z/3/
HTML
<input type="number" id="input" />
<input id="stop" type="button" value="stop"/>
<input id="start" type="button" value="start"/>
Javascript
$(function() {
var timer = null,
interval = 1000,
value = 0;
$("#start").click(function() {
if (timer !== null) return;
timer = setInterval(function () {
$("#input").val(++value);
}, interval);
});
$("#stop").click(function() {
clearInterval(timer);
timer = null
});
});
Ответ 3
Как вы отметили этот jQuery...
Сначала поместите идентификаторы на свои кнопки ввода и удалите встроенные обработчики:
<input type="number" id="input" />
<input type="button" id="stop" value="stop"/>
<input type="button" id="start" value="start"/>
Затем сохраните все ваше состояние и функции, заключенные в закрытие:
EDIT обновлен для более чистой реализации, что также затрагивает проблемы @Esailija об использовании setInterval()
.
$(function() {
var timer = null;
var input = document.getElementById('input');
function tick() {
++input.value;
start(); // restart the timer
};
function start() { // use a one-off timer
timer = setTimeout(tick, 1000);
};
function stop() {
clearTimeout(timer);
};
$('#start').bind("click", start); // use .on in jQuery 1.7+
$('#stop').bind("click", stop);
start(); // if you want it to auto-start
});
Это гарантирует, что ни одна из ваших переменных не попадет в глобальную область действия и не может быть изменена извне.
(Обновлено) рабочая демонстрация http://jsfiddle.net/alnitak/Q6RhG/
Ответ 4
add - это локальная переменная, а не глобальная переменная.
var add;
var input = document.getElementById("input");
function start() {
add = setInterval("input.value++",1000);
}start();
Ответ 5
(function(){
var i = 0;
function stop(){
clearTimeout(i);
}
function start(){
i = setTimeout( timed, 1000 );
}
function timed(){
document.getElementById("input").value++;
start();
}
window.stop = stop;
window.start = start;
})()
http://jsfiddle.net/TE3Z2/
Ответ 6
Вы не можете остановить выполнение функции таймера. Вы можете поймать его только после того, как он завершится, и не допустить его повторного запуска.