注意 JavaScript 大师们：需要关于 setInterval() 的帮助

Question

3

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

自从我上次使用setInterval()以来已经有一段时间了。

当我的脚本第一次运行时，它很好。但是当它尝试通过getNextProperty()获取下一个属性时，它开始变得不稳定。如果您有Firebug或类似于console.log()的输出，您会看到它调用了不应该调用的东西！

现在有相当多的JavaScript代码，所以我更愿意链接它而不是全部发布出来。

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

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

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

这已经让我疯狂了一段时间，所以有人能帮帮我吗？

这可能是非常明显的问题！

更新

现在我感觉好多了，因为我知道问题出在我天真地认为插件可以直接使用。

我从Stack Overflow的一个答案中获得了这个插件。我已经通知了这个问题的作者。

感谢您所有的回答！

- alex

1

+1 不要在这里发布所有的 JS。 - griegs

第一次加载后，jQuery.loadedImages.length >= jQuery.imagesToLoad 始终为真。在它们被加载后重置 jQuery.loadedImages 可能会有所帮助。 - Brian McKenna

如果您正在使用jQuery 1.4，则var nextImageIndex = $('#images ul li').index(nextListItem);应为var nextImageIndex = nextListItem.index();。 - Reigel Gallarde

@Brian McKenna 让我感到非常高兴的是知道错误在第三方插件中:D 请发布为答案，以便我可以接受... - alex

@alex +1 很棒的网站，看起来你已经解决了问题。现在对我来说似乎运行良好。 - Anurag

+1 - 网站做得很好，问题也很有趣要追踪 :) - Nick Craver

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick Craver · Accepted Answer

这是你需要解决的问题区域：

jQuery.extend(jQuery, {
  imagesToLoad: 0,

问题在于这个变量是全局/共享的 (jQuery.imagesToLoad)，因此稍后进行的检查如下：

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

这个插件的正常使用前提是不会同时被调用两次，否则那个if判断就会出问题，因为你在代码中稍后又调用了它：

$.preloadImages({
  urls: [nextImage],

当计数器降至1时，if条件判断将不仅在最后一张图片上成立，而且在第一个集合之后的所有图像中也会成立（由于回调函数运行的时间重叠），这会导致complete回调函数触发多次，而不仅仅是一次。因此，以下代码：

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

看到 complete 函数运行多次，所以你同时启动了多个间隔（这就是为什么在日志中看到 console.log('show property called' + property.slug) 执行多次的原因）。

简单修复方法：用不使用全局变量的版本替换 preloadImages 代码 :)