setInterval,clearInterval,setTimeout冲突弄乱了幻灯片

时间:2013-11-22 23:01:27

标签: javascript settimeout setinterval

我有一个幻灯片,通过触发我的左箭头点击setInterval在document.ready上自动播放。我试图在单击导航箭头时停止自动播放,同时仍允许箭头导航幻灯片。

这就完成了。

var intervalId = window.setInterval(switchLeft, 4000);

$("#leftarrow, #rightarrow").click(function() {
    window.clearInterval(intervalId);
});

但是如果没有在8秒内点击箭头,我希望自动播放重新开始。我已经尝试通过将setTimeout添加到click函数中来重新设置setInterval,但是它会在暂停期间计算用户导航的所有点击次数并开始像疯了一样投掷我的幻灯片。 (每次点击都会移动两层图像。)

setTimeout(function() {
  intervalId = window.setInterval(switchLeft, 4000)
}, 8000);

我尝试在setTimeout函数中包装东西,但我最终得到了不同的怪异。

感谢您的帮助, 查理马吉

1 个答案:

答案 0 :(得分:1)

如果箭头在点击之前被点击,你需要取消setTimeout(),这样你就不会立刻得到多个计时器(这肯定会表现出奇怪的感觉)。

我没有完全遵循您在箭头上尝试做的事情,但此代码应该管理定时器:

var intervalId = setInterval(switchLeft, 4000);
var timeoutId;

$("#leftarrow, #rightarrow").click(function() {

    // clear any relevant timers that might be going 
    // so we never get multiple timers going
    clearInterval(intervalId);
    clearTimeout(timeoutId);

    // restart the interval in 8 seconds
    timeoutId = setTimeout(function() {
        intervalId = window.setInterval(switchLeft, 4000)
    }, 8000);
});