javascript - 单击按钮时尝试将 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 后仅清除了一行。

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

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

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

此外，如果您想防止在多次单击下一步按钮时执行多次旋转，您可以在回调范围之外创建一个变量来存储您的setTimeout > 实例，然后在单击按钮时清除它。示例:

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