Question

我在点击“下一步”按钮时尝试暂时暂停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);
});

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

3 个答案: