JavaScript/jQuery 间隔在 Internet Explorer 中执行两次

Question

我在 jQuery 中创建了一个小的 fadeIn/fadeOut 轮播，它在迄今为止我测试过的每个符合标准的浏览器中都运行良好； Internet Explorer 9 除外。

使用 setInterval 将轮播设置为每 15000 毫秒滚动到下一个项目，并且还使用 window.addEventListener 在以下情况下暂停它:聚焦窗外。

当我在 Internet Explorer 9 中测试它时，我注意到每个间隔每次都会执行两次，因此不是切换到下一个项目然后等待 15 秒(就像在其他浏览器中发生的情况一样)，而是滚动两个项目在等待下一个间隔之前。

代码可能太长，无法发布，但页面本身位于 http://www.stefanvignir.de/ JavaScript 文件位于 http://www.stefanvignir.de/carousel.js .

如何才能使其在 IE9 中正常工作以及在将 JavaScript 适配到 IE 时应该避免什么？

Answer 1

我猜想当一切都启动时，你的焦点监听器就会被调用。您可以在启动计时器之前尝试检查是否有 carouselIntervalId:

if(!carouselIntervalId)
    carouselIntervalId = setInterval(...);

由于我们都非常偏执，因此请在两者 setInterval 调用之前进行检查。

然后，当您停止计时器时，您需要使 carouselIntervalId 无效:

if(carouselIntervalId)
    clearInterval(carouselIntervalId);
carouselIntervalId = null;

当然，您希望所有 clearInterval 调用都包含上述内容。

此外，虽然我引起了您的注意(？)，但我注意到您有两个不同的 setInterval 调用:

setInterval(function() { carouselNext() }, 15000);
// And later...
setInterval(function() { if (animate == true) { carouselNext() } }, 15000);

您可能希望使它们相同以避免混淆和错误。