запуск и остановка / пауза setInterval с использованием JavaScript, jQuery - PullRequest
Новая
       30

запуск и остановка / пауза setInterval с использованием JavaScript, jQuery

22 голосов
/ 16 декабря 2011

Я пытаюсь сделать паузу, а затем воспроизвести цикл setInterval.

После того, как я остановил цикл, кнопка «Пуск» в моя попытка , похоже, не работает:

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.

Спасибо!

Ответы [ 6 ]

34 голосов
/ 16 декабря 2011

См. Рабочую демонстрацию на 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"/>

1012 * 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
    });
});
17 голосов
/ 16 декабря 2011

Причина, по которой вы видите эту конкретную проблему:

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();
9 голосов
/ 16 декабря 2011

Как вы пометили этот 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/

3 голосов
/ 16 декабря 2011

add это локальная переменная, а не глобальная переменная попробуйте это 

var add;
var input = document.getElementById("input");
function start() {
    add = setInterval("input.value++",1000);
}start();
1 голос
/ 16 декабря 2011 
(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/

0 голосов
/ 16 декабря 2011

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

...