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

代码看起来很好。

但是......你在调用 clearInterval 函数时是否检查了 timer 变量是否正确设置？

Answer 4

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

现在问你的问题......你需要一个状态来检查滑块是否滑动......只需设置一个这样的bool ......

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

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

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

这是一个工作小提琴，我为你理解定时器和间隔的用途：https://jsfiddle.net/q5qzmv68/7/

希望这有帮助！干杯！

如何暂停和恢复jquery间隔

4 个答案: