javascript - 注意 JavaScript 大师 : Need a hand with setInterval()

Question

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

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

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

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

Store Display

Offending JavaScript

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

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

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

这让我抓狂了一段时间，所以有人能帮助我吗？

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

非常感谢!

更新

好吧，现在我知道问题出在我天真地认为插件可以开箱即用。

我确实从 an answer on Stack Overflow 得到了这个插件.我已将此问题提醒作者。

感谢您的所有回答!

Answer 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 代码替换为不使用全局变量的版本:)