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() не определяется в глобальной области.

Мораль истории: не используйте встроенные привязки событий. Используйте 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

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