注意 JavaScript 大师：需要帮助 setInterval()答案

【问题标题】：Attention JavaScript gurus: Need a hand with setInterval()注意 JavaScript 大师：需要帮助 setInterval()
【发布时间】：2010-06-16 09:45:31
【问题描述】：

我正在尝试为房地产商店橱窗制作非交互式展示。

我已经有一段时间没有玩setInterval()了。

我的脚本第一次执行时，一切正常。但是当它试图通过getNextProperty() 获取下一个属性时，它开始变得混乱。如果您有 Firebug 或 console.log() 的等效输出，您会看到它正在调用它不应该调用的东西！

现在有相当多的 JavaScript，所以我会觉得链接到它比发布所有内容更好。

值得一提的是，我所有的 DOM/AJAX 都是用 jQuery 完成的。

我已尽最大努力确保clearInterval() 正常工作，并且它似乎没有在它下面运行任何代码。

setInterval() 用于预加载下一张图片，然后在图库中显示。当间隔检测到我们位于最后一张图像 ((nextListItem.length === 0)) 时，意味着清除该间隔并使用新属性重新开始。

这已经让我发疯了一段时间，所以有人可以帮助我吗？

这可能是非常明显的事情！

非常感谢！

更新

好吧，现在我知道问题在于我天真地假设插件可以开箱即用。

我确实从an answer on Stack Overflow 得到了这个插件。我已经通知了这个问题的作者。

感谢您的所有回答！

【问题讨论】：

+1 表示没有在此处发布所有 JS。
jQuery.loadedImages.length >= jQuery.imagesToLoad 在第一次加载后始终为真。加载后重置 jQuery.loadedImages 可能会有所帮助。
不是答案，但如果您使用的是 jQuery 1.4，var nextImageIndex = $('#images ul li').index(nextListItem); 只是 var nextImageIndex = nextListItem.index();
@Brian McKenna 知道错误出现在第三方插件中让我感觉很棒：D 请作为答案发布，以便我接受...
@alex +1 不错的网站，看起来您已经找到了问题所在。它现在对我来说似乎工作正常。

【解决方案1】：

这是您的问题区域：

jQuery.extend(jQuery, {
  imagesToLoad: 0,

问题是这个变量是全局/共享的（jQuery.imagesToLoad），所以稍后再检查：

if(jQuery.loadedImages.length >= jQuery.imagesToLoad){

取决于此插件不会同时被调用两次，否则如果检查发疯，因为您稍后会在代码中调用它：

$.preloadImages({
  urls: [nextImage],

该计数下降到 1，使得 if 不仅在最后一张图像上评估为 true，而且在第一张之后的集合中的所有图像（由于回调运行时，它在时间上重叠)，这会导致complete 回调触发多次次，而不仅仅是一次，所以这段代码：

$.preloadImages({
 urls: preloadImages,
 complete: function() { showProperty(property); }
});

...看到 complete 函数运行很多次，因此您同时开始很多个间隔（这就是您看到 console.log('show property called' + property.slug) 的原因在日志中执行了这么多次）。

短期修复：将preloadImages 代码替换为不使用全局变量的版本:)

【讨论】：