setInterval、clearInterval、setTimeout 冲突搞砸幻灯片

Question

我有一个幻灯片，可以在 document.ready 上自动播放，方法是触发我的左箭头单击 setInterval。我试图在单击导航箭头时停止自动播放，同时仍然允许箭头在幻灯片中导航。

这就完成了。

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 函数中，但我最终得到了不同的怪异。

感谢您的帮助， 查理马吉

Answer 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);
});