JavaScript专家注意:需要带setInterval()的帮助

问题描述

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

I am trying to make a non interactive display for a real estate shop window.

自从我玩过setInterval()已经有一段时间了.

It's been a while since I've played with setInterval().

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

The first time my script steps through, it is fine. But when it tries to get the next property via getNextProperty(), it starts to go haywire. If you have Firebug, or an equivalent output of console.log(), you'll see it is calling things it shouldn't!

现在有相当多的JavaScript，因此与发布所有链接相比，链接起来会更好.

Now there is a fair bit of JavaScript, so I'll feel better linking to it than posting it all.

商店展示

违反JavaScript的

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

It is worth mentioning all my DOM/AJAX is done with jQuery.

我已尽力确保clearInterval()正常运行，并且似乎未在其下运行任何代码.

I've tried as best to make sure clearInterval() is working, and it seems to not run any code below it.

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

The setInterval() is used to preload the next image, and then display it in the gallery. When the interval detects we are at the last image ((nextListItem.length === 0)), it is meant to clear that interval and start over with a new property.

现在已经让我发疯了一段时间，所以有人能帮助我吗?

It has been driving me nuts for a while now, so anyone able to help me?

这可能真的很明显！

非常感谢！

好吧，现在我更好地知道这个问题是我天真的以为插件可以开箱即用.

Well, now I feel better to know the problem was my naiveness of assuming plugins would work out of the box.

我确实从有关堆栈溢出的答案中获取了此插件.我已经向作者提了这个问题.

I did get this plugin from an answer on Stack Overflow. I have alerted the author of this question.

感谢您的所有回答！

推荐答案

这是您的问题所在:

jQuery.extend(jQuery, {
  imagesToLoad: 0,

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

The problem is that this variable is global/shared (jQuery.imagesToLoad), so this check later on:

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

取决于此插件是否不能同时被调用两次，否则，如果检查失败，则因为您稍后将在代码中调用此插件而已:

Depends on this plugin not being called twice at the same time, otherwise that if check goes nuts, since you're calling this later in your code:

$.preloadImages({
  urls: [nextImage],

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

That count drops to 1, making the if evaluate to true not just on the last image, but all the images after the first in sets after the first (due to when the callback runs, it overlaps in time), which causes the complete callback to fire many times, not just once, so this code:

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

...看到complete函数运行许多次，因此您同时启动许多间隔(这就是为什么看到console.log('show property called' + property.slug)在日志中执行了很多次).

...sees that complete function running many times, so you're starting many intervals at the same time (this is why you see console.log('show property called' + property.slug) execute so many times in the log).

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

Short fix: replace the preloadImages code with a version that doesn't use a global variable :)

这篇关于JavaScript专家注意:需要带setInterval()的帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！