Javascript setInterval、clearInterval、setTimeout冲突将幻灯片放映搞砸

我有一个幻灯片，可以自动在文档上播放。通过触发我的左箭头，点击setInterval即可。我试图在单击导航箭头时停止自动播放，同时仍允许箭头导航幻灯片

这就实现了这一点

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

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

但是如果箭头在8秒钟内没有被点击，我希望自动播放能够恢复。我曾尝试通过将此setTimeout添加到click函数中来重新设置setInterval，但它会计算暂停期间用户导航的所有单击次数，并开始疯狂地四处扔幻灯片。（每次点击都会有两层图像移动。）

我曾经尝试过用setTimeout函数包装东西，但结果却不一样

谢谢你的帮助，

---

Charlie Magee

如果在触发前单击箭头，则需要取消

设置超时（）

，这样就不会同时启动多个计时器（这肯定会表现出奇怪）

我并没有完全按照您试图在箭头上执行的操作，但这段代码应该管理计时器：

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

---

如果在触发前单击箭头，则需要取消

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

---

请为我们提供一个JSFIDLE，以便我们可以帮助您更容易请为我们提供一个JSFIDLE，以便我们可以帮助您更容易您的示例所做的事情与我的示例所做的相同。switchLeft是我的功能，也由左箭头触发。它从右向左发送幻灯片。右转则相反。里面没有计时器。如果我点击右箭头几次，然后点击左箭头，很快所有的东西都会在这个地方来回移动，因为他们试图跟上点击和设置间隔。看电影很有趣，但不是我需要的。我想我需要一种方法来停止点击的间隔，但是忽略8000的点击功能。可能类似于在我用setTimeout显示和隐藏的箭头顶部使用透明div进行设置和清除？@charliemagee-我在代码中做了一个更正（删除了原始代码中的

var

，以便正确使用范围更大的变量）。这应该会有帮助。如果switchLeft函数中也有动画，那么您可能需要在click函数中停止该动画。这现在可以适当地管理这些计时器。如果您需要其他问题的帮助，您必须向我们展示其余的代码。jfriend00--太好了！我的作用域仍有问题如您所见，有很多变量。我的switchLeft和switchRight都是动画，但看起来只有几个需要调整。非常感谢。顺便问一下，如何在我的用户名前面找到@符号？我在stackoverflow常见问题解答中找不到。@charliemagee-我只是键入了“@”手动输入，然后输入您姓名的前几个字母，它会自动完成与此问题相关的人员。

@username

确保该人员收到您的评论，尽管回答者会自动收到关于其答案的任何评论的通知，提问者会自动收到关于其答案的任何评论的通知r问题。你的例子和我的一样。switchLeft是我的函数，也是由左箭头触发的。它从右向左发送幻灯片。switchRight的作用正好相反。没有隐藏的计时器。如果我点击右箭头几次，左箭头就会很快在整个pla上来回移动ce，因为他们试图赶上点击和设置间隔。这很有趣，但不是我所需要的。我想我需要一种方法来停止点击间隔，但忽略8000的点击功能。可能类似于在我显示和隐藏的箭头上设置透明div并清除，用设置超时？@charliemagee-我在代码中做了一个更正（删除了原始代码中的

var

，以便正确使用范围更大的变量）。这应该会有帮助。如果switchLeft函数中也有动画，那么您可能需要在click函数中停止该动画。这现在可以适当地管理这些计时器。如果您需要其他问题的帮助，您必须向我们展示其余的代码。jfriend00--太好了！我的作用域仍有问题如您所见，有很多变量。我的switchLeft和switchRight都是动画，但看起来只有几个需要调整。非常感谢。顺便问一下，如何在我的用户名前面找到@符号？我在stackoverflow常见问题解答中找不到。@charliemagee-我只是键入了“@”手动输入，然后输入您姓名的前几个字母，它会自动完成与此问题相关的人员。

@username

确保该人员收到您的评论，尽管回答者会自动收到关于其答案的任何评论的通知，提问者会自动收到关于其答案的任何评论的通知r问题。