单击按钮时尝试暂停setinterval 10秒

Question

我试图在单击“下一步”按钮时暂时暂停setInterval 。 目前它会停止当前的setinterval但不会在10秒后再次启动它。

我有一个简单的图像旋转器，可以在4秒内改变图像。 单击“下一步”按钮时，我希望它在再次开始4秒旋转之前暂停间隔10秒。

继到目前为止的代码（已经简化）：

var ic = $('#imageContainer');
var numItems = $('.image').size();
var position = 0;
ic.css('left', '0px');

var inter;

function rotate() {
    inter = setInterval(function () {
        if (position == (numItems - 1)) {
            console.log(position);
            $('.image').first().insertAfter($('.image').last());
            ic.css('left', '+=400px');
            position--;
        }
        ic.animate({
            left: "-=400px"
        });
        position += 1;
    }, 4000);
}
rotate();

$('#next').click(function () {
    clearInterval(inter);
    nextInter = setInterval(function () {
        rotate();
    }, 10000);
    clearInterval(nextInter);
});

Answer 1

在安排nextInter ，您将在执行后立即清除它。

你需要的是setTimeout（）而不是setInterval（） 。 你需要的是在10秒后调用旋转，但是setInterval会在每10秒钟调用它，所以你要清除它，但问题是你在它有机会执行旋转甚至一次之前清除它。

$('#next').click(function () {
    clearInterval(inter);
    setTimeout(rotate, 10000 );
});

Answer 2

发生这种情况是因为您在创建nextInter只清除了一行。

nextInter = setInterval(function(){rotate();}, 10000 );
clearInterval(nextInter);

但是，如果删除最后一个clearInterval ，则nextInter间隔将每10秒调用一次rotate ，这将为每4秒设置一个新间隔。 这肯定会导致意外行为。 我认为你正在寻找setTimeout 。

$('#next').click(function () {
    clearInterval(inter);
    setTimeout(rotate, 10000);
});

此外，如果您想要多次单击下一个按钮而无法进行多次rotate ，则可以在回调范围外创建一个变量来存储setTimeout实例，然后在单击该按钮时将其清除。 例：

var rotateTimeout;
$('#next').click(function () {
    clearInterval(inter);
    clearTimeout(rotateTimeout);
    rotateTimeout = setTimeout(rotate, 10000);
});

Answer 3

您可以使用setTimeout执行此操作：

$('#next').click(function () {
    clearInterval(inter);
    nextInter = setTimeout(rotate, 10000);
});