定时功能和用户启动功能之间的冲突

Question

我一直在搞乱这个我从头开始编写的javascript，除了我最近遇到的一个小问题之外，它工作得相当好。代码的目的是创建一个相当简单的幻灯片，自动循环播放照片（每5秒钟）。

当我添加功能以允许用户通过单击链接选择系列中的照片时，出现了问题。现在，当用户继续点击照片时，5秒的持续时间急剧减少，我无法弄清楚是什么原因造成的。

我已经复制了重新创建和测试代码到JSFiddle所需的所有代码，如果有人愿意看一看并提出一些建设性的批评。

http://jsfiddle.net/h8Act/1/

Answer 1

每次用户点击这些链接时，他们都会启动另一个＆＃34; round＆＃34; sireTimer()，因此开始另一个setTimeout所以看起来旋转之间的时间缩短了，实际上，你的函数有多个实例触发了旋转功能。

尝试添加标记，以避免启动上瘾setTimeout s

Answer 2

我不会记住单个var中的超时但是在数组中

durations = [];

/* ... */

// in sireTimer
    // cancel all timeouts
for (var i=0; i< durations.length; i++) {
   clearTimeout(durations[i])
}
    // clear timeout array
durations = [];
durations.push(setTimeout ...)

窗口和标签的翻转也可能会启动一些超时。所以只需清除所有超时