jQuery play/pause jQuery function

jQuery play/pause jQuery function

本文关键字：jQuery function pause play      更新时间：2023-09-26

我想做的是播放和暂停一个功能，即按下一个按钮启动一个函数，按一个按钮暂停等等。我不完全确定如何做到这一点，我已经尝试过 .live(( 和 .die((，但它们不起作用。

小提琴

我在下面有HTML

<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();
});​

试试这个jsFiddle的例子。你需要使用 clearInterval(( 来停止 setInterval((。

j查询：

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

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 不会加快任何速度，您只需启动多个间隔回调。

您必须使用 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);
});

演示

演示小提琴 

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

快乐编码

我不完全确定 .die(( 的作用，但在 jsfiddle 上似乎加快了间隔时间。

这是因为这段代码：

playing().die();

。相当于这个：

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

也就是说，首先调用playing()函数，该函数始终创建另一个间隔。然后，它尝试对从playing()返回的任何内容调用die()方法，该方法始终只是一个间隔 id，即一个数字 - 它没有die()方法(并且会给出错误(。

这同样适用于playing().live() - 所以基本上每次你点击任何一个按钮时，它都会增加另一个间隔，这意味着实际输出到屏幕的速度。

您需要的是使用 setInterval() 和 clearInterval() 设置和清除相同的间隔，或者基本上让间隔一直运行，但在其回调中放置一个测试以测试它当前是否暂停。雅各布·厄廷格(Jacob Oettinger(的回答很好地展示了如果连续多次按下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/

相关文章：