如何暂停和恢复 jquery 间隔

Question

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

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

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

clearInterval(timer);

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

Answer 1

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

编辑：发现了一些可能对你有用的东西，the jquery-timer

或者，您可以跟踪 setInterval 设置的 ID，并在您想暂停时清除。然后你想恢复的时候再设置一下：

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

Answer 2

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

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

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

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

Answer 3

我不完全确定，您所要求的是您向我们展示的正确内容...setInterval 基本上是纯原生的 javascript，在我看来不值得使用！如果你不想通过 jquery 设置超时，试试这个 link: 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!
}

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

希望对您有所帮助！干杯！

如何暂停和恢复 jquery 间隔

How to pause and resume jquery interval

javascript

jquery

slider

setinterval