Javascript jQuery播放/暂停jQuery函数

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

我有下面的HTML

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

播放
暂停
​

我不完全确定.die（）的作用，但是在JSFIDLE上的jQuery似乎加快了间隔时间

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

（函数（$）{
播放=函数（）{
setInterval（函数（）{
美元（“.divafter”）。之后（“播放
”；
}, 500);
};
})（jQuery）；
$（“.play”）。单击（函数（）{
播放（）.live（）；
});
$（“.pause”）。单击（函数（）{
玩（）.die（）；
});​

您必须使用clearInterval来模拟暂停效果

像这样抓取间隔的实例

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

代码的用法如下：

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

})(jQuery);

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

var播放状态；
（函数（$）{
播放=函数（）{
返回setInterval（函数（）{
美元（“.divafter”）。之后（“播放
”；
}, 500);
};
})（jQuery）；
$（“.play”）。单击（函数（）{
播放状态=播放（）；
});
$（“.pause”）。单击（函数（）{
clearInterval（播放状态）；
});

试试这个。您需要使用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);
});​

var-foo；
播放=函数（）{
foo=window.setInterval（函数（）{
美元（“.divafter”）。之后（“播放
”；
}, 500);
}
$（“.play”）。单击（函数（）{
玩（）；
});
$（“.pause”）。单击（函数（）{
清除间隔（foo）；
});​

$（函数（）{
var回路；
函数播放（）{
循环=设置间隔（函数（）{
美元（“.divafter”）。之后（“播放
”；
}, 500);
}
$（“.play”）。单击（函数（）{
玩（）；
});
$（“.pause”）。单击（函数（）{
清除间隔（循环）；
});
});

快乐编码

live（）

和

die（）

与您的需求无关。所以，忘掉这些：）

您需要停止已启动的间隔回调。如下图所示

播放
暂停

（函数（$）{
var区间；
var=false；
$（“.play”）。单击（函数（）{
如果（玩）{
返回；
}
玩=真；
间隔=设置间隔（函数（）{
美元（“.divafter”）。之后（“播放
”；
}, 500);
});
$（“.pause”）。单击（函数（）{
玩=假；
间隔时间；
});
})（jQuery）；

---

jsiddle不会加快任何速度，您只需启动多个间隔回调。

我不完全确定.die（）会做什么，但在jsiddle上似乎会加快间隔时间。

这是因为该代码：

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);

（函数（$）{
var=假，
intervalId=setInterval（函数（）{
如果（！玩）
返回；
美元（“.divafter”）。之后（“播放
”；
}, 500);
$（“.play”）。单击（函数（）{
玩=真；
});
$（“.pause”）。单击（函数（）{
玩=假；
});    
})（jQuery）；

---

演示：

我不知道live（）和die（）的功能是什么？+1是唯一一个答案，如果连续多次单击播放，则不会启动多个间隔。

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

playing().die();

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

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