jQuery play / pause функция jQuery

Question

Я пытаюсь воспроизвести и приостановить функцию, т.е. нажать кнопку, чтобы запустить функцию, нажать кнопку, чтобы сделать паузу и так далее. Я не совсем уверен, как это можно сделать. Я пробовал .live () и .die (), но они не работают.

Fiddle

У меня есть код ниже

<button class="play">play</button>
<button class="pause">pause</button>
<div class="divafter"></div>​

и jQuery, который я не совсем уверен, что делает .die (), но на jsfiddle, кажется, ускоряет интервал времени.

(function($){
  playing = function() {
window.setInterval(function() {
    $(".divafter").after("playing <br/>");
}, 500);
};
})(jQuery);
$(".play").click(function(){
    playing().live();
});
$(".pause").click(function(){
    playing().die();
});​

Answer 1

live() и die() не имеют ничего общего с тем, что вы хотите.Так что забудьте:)

Вам нужно остановить интервальный обратный вызов, который вы начали.Как и в приведенном ниже демо здесь

<button class="play">play</button>
<button class="pause">pause</button>
<div class="divafter"></div>

(function($){
    var interval;        
    var playing = false;
    $(".play").click(function(){
        if(playing){
            return;
        }
        playing = true;
        interval = setInterval(function() {
            $(".divafter").after("playing <br/>");
        }, 500);
    });
    $(".pause").click(function(){
        playing = false;
        clearInterval(interval);            
    });

})(jQuery);

Jsfiddle ничего не ускоряет, вы просто запускаете несколько интервальных обратных вызовов.

Answer 2

Попробуйте это jsFiddle пример . Вам нужно использовать clearInterval (), чтобы остановить setInterval ().

JQuery:

var foo;
playing = function() {
    foo = window.setInterval(function() {
        $(".divafter").after("playing <br/>");
    }, 500);
}

$(".play").click(function() {
    playing();
});
$(".pause").click(function() {
    clearInterval(foo);
});​

Answer 3

Я не совсем уверен, что делает .die (), но на jsfiddle, кажется, ускоряет интервал времени.

Это потому, что этот код:

playing().die();

... эквивалентно этому:

var playingResult = playing();
playingResult.die();

То есть сначала вызывается функция playing(), которая всегда создает другой интервал.Затем он пытается вызвать метод die() для того, что было возвращено из playing(), который всегда является просто идентификатором интервала, т. Е. Числом, которое не имеет метода die() (и выдаст ошибку).

То же самое относится к playing().live() - поэтому, по сути, каждый раз, когда вы нажимаете любую кнопку, добавляется еще один интервал, который означает, что фактический вывод на экран ускоряется.

Вам нужно установить и очиститьтот же интервал с использованием setInterval() и clearInterval(), или в основном оставляет интервал работающим все время, но помещает тест в свой обратный вызов, чтобы проверить, не приостановлен ли он в данный момент.Ответ Якоба Эттингера прекрасно показывает, как установить и очистить интервал , не создавая дублирующихся интервалов , если Play нажимается несколько раз подряд (ни один из других ответов для проверки даты для этого).Другой способ сделать это следующим образом:

(function($){
    var playing = false,
        intervalId = setInterval(function() {
            if (!playing)
                return;
            $(".divafter").after("playing <br/>");
        }, 500);

    $(".play").click(function(){
        playing = true;
    });
    $(".pause").click(function(){
        playing = false;          
    });    
})(jQuery);

Демо: http://jsfiddle.net/ExCKW/

Answer 4

демонстрационная скрипка

$(function(){

    var loop;

    function playing() {
        loop = setInterval(function() {
            $(".divafter").after("playing <br/>");
        }, 500);
    }

    $(".play").click(function(){
        playing();
    });
    $(".pause").click(function(){
        clearInterval(loop);
    });

});

Счастливое кодирование

Answer 5

Вам потребуется clearInterval для имитации эффекта паузы.

Получить экземпляр интервала, как это

playing = setInterval(function() {
            $(".divafter").after("playing <br/>");
          }, 500);

И ясно, чтобы сделать паузу

clearInterval(playing);

Использование вашего кода будет следующим:

var playstatus;
(function($){
    playing = function() {
        return setInterval(function() {
           $(".divafter").after("playing <br/>");
           }, 500);
    };

})(jQuery);

$(".play").click(function(){
    playstatus = playing();
});
$(".pause").click(function(){
   clearInterval(playstatus);
});

Демо