2

setInterval单击“下一步”按钮时，我试图暂时暂停 a 。目前它会停止当前的 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);
});
4

3 回答 3

3

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

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

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

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

此外，如果您想防止在多次rotate单击下一个按钮时执行多个 s，您可以在回调范围之外创建一个变量来存储您的setTimeout实例，然后在单击按钮时将其清除。例子：

var rotateTimeout;
$('#next').click(function () {
    clearInterval(inter);
    clearTimeout(rotateTimeout);
    rotateTimeout = setTimeout(rotate, 10000);
});
于 2013-11-01T12:03:34.037 回答
3

安排 后nextInter，您将在执行后不久将其清除。

您在这里需要的是setTimeout()而不是setInterval()。您需要的是在 10 秒后调用旋转，但 setInterval 将每 10 秒调用一次，因此您正在清除它，但问题是您在它有机会执行旋转之前就将其清除了一次。

$('#next').click(function () {
    clearInterval(inter);
    setTimeout(rotate, 10000 );
});
于 2013-11-01T12:01:42.990 回答
2

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

$('#next').click(function () {
    clearInterval(inter);
    nextInter = setTimeout(rotate, 10000);
});
于 2013-11-01T12:03:16.670 回答