如何暂停和恢复jquery间隔答案

【问题标题】：How to pause and resume jquery interval如何暂停和恢复jquery间隔
【发布时间】：2015-04-07 17:32:40
【问题描述】：

我用 jQuery 制作了一个自定义滑块。为此，我使用了 setInterval 函数：

timer = setInterval(function() {},  8000);

但我无法暂停和恢复间隔。我有 2 个要使用的按钮（播放、暂停）。假设我在 3 秒后单击暂停，然后继续。所以它应该在那个滑块中多停留 5 秒，然后转到下一个并继续每个 8 秒。我见过这种带有鼠标悬停暂停的滑块，但我自己做不到。我试过这个：

clearInterval(timer);

但这似乎重置了间隔，不要暂停。谁能帮忙:)

【问题讨论】：

代码看起来不错。但是……你在调用clearInterval函数的时候检查过timer变量是否设置正确了吗？
我认为您的问题不够清楚，因为没有人 （编辑：有人回答了您的问题） 给出了真正回答它的答案（讽刺）。 JavaScript 没有那种内置函数。话虽这么说，由于您要求提供代码，因此您的问题对于 SO 来说有点超出主题。无论如何，你可能会更好地使用计时器库，我确定已经存在一个。

标签： javascript jquery slider setinterval

【解决方案1】：

有两种方法可以做到这一点：

每次暂停时清除间隔并在恢复时开始新间隔。
有一个标志来告诉函数何时暂停，它不应该做任何事情。

第一个解决方案会这样工作：

var intervalId = false;

function intervalFunction () {
   // do stuff.
}

startButton.onclick = function () {
    if (intervalId === false) {
        intervalId = setInterval(intervalFunction, 8000);
    }
}

pauseButton.onclick = function () {
    if (intervalId !== false) {
        clearInterval(intervalFunction);
        intervalId = false;
    }
}

// auto start it:
intervalId = setInterval(intervalId);

第二种解决方案的工作方式如下：

var isRunning = true;
var interval = setInterval(function() {
    if (!isRunning) {
        // not running, do nothing
    } else {
        // it is running, do stuff.
    }
}, 8000);

pauseButton.onclick = function () {
    isRunning = false;
};
startButton.onclick = function () {
    isRunning = true;
};

【讨论】：

【解决方案2】：

我不完全确定这是 jQuery 原生的东西，但是，你可以使用一个标志来暂停它，并检查你的 setInterval 是否执行。

编辑：找到了可能对你有用的东西，the jquery-timer

或者，您可以跟踪由 setInterval 设置的 id，并在您想暂停时清除。然后你可以在你想恢复的时候重新设置它：

var id = window.setInterval(<code>); //create
window.clearInterval(id); //pause
id = window.setInterval(<code>); //resume

【讨论】：

添加到您的评论中，因为 实际上是一个函数，如果您在此之前声明该函数，您可以简单地将函数传递给初始 setInterval 调用和恢复 setInterval，确保您没有代码重复，那 start 和 resume 做同样的事情。
@aradil 的解决方案是一个优雅的补充。计算机不是很棒吗？
使用了定时器脚本。有帮助！谢谢。

【解决方案3】：

我不完全确定，您所要求的是否是您向我们展示的正确内容... setInterval 基本上是纯原生 javascript，在我看来不值得使用！如果您不想通过 jquery 设置超时，请尝试以下链接：http://jchavannes.com/jquery-timer。你可以在那里找到用法......

现在解决您的问题...您需要一个状态来检查滑块是否必须滑动...只需像这样设置一个布尔值...

var timer;
var doSlide = false;
var i = 0;

function Slide(){

    timer = setTimeout(function(){

        if(doSlide == true){
            Slide();
            i++; // Same as i = i + 1
            console.log('Sliding');

            if(i == 3) AbortSlide(); /* Abort on third slide! Dont use this in your logic!*/

        } else if(doSlide == false){
            console.log('Sliding aborted untill next RunSlide() call!')
            clearTimeout(timer);
        }

    },1000);

}

function AbortSlide(){
    doSlide = false;
    i = 0;  // Resetting the count! Dont use this in your logic!
}

function RunSlide(){
    doSlide = true;
    Slide();
}

RunSlide();

您也可以在 abort 方法中清空间隔：

function AbortSlide(){
    doSlide = false;
    clearTimeout(timer);
    i = 0; // Resetting the count! Dont use this in your logic!
}

这是我为您制作的工作小提琴，用于了解计时器和间隔的用途：https://jsfiddle.net/q5qzmv68/7/

希望这会有所帮助！干杯！

【讨论】：