3

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

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

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!

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

Store Display

Offending JavaScript

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

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

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?

It is probably something really obvious!

Many thanks!

Update

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.

Thanks for all your answers!

Community
  • 1
  • 1
alex
  • 479,566
  • 201
  • 878
  • 984
  • 1
    +1 for not posting all the JS here. – griegs Jun 16 '10 at 01:12
  • `jQuery.loadedImages.length >= jQuery.imagesToLoad` is always true after the first load. Resetting `jQuery.loadedImages` after they're loaded might help. – Brian McKenna Jun 16 '10 at 01:33
  • not the answer but if you are on jQuery 1.4, `var nextImageIndex = $('#images ul li').index(nextListItem);` is just `var nextImageIndex = nextListItem.index();` – Reigel Gallarde Jun 16 '10 at 01:39
  • @Brian McKenna It makes me feel great to know the error was in a third party plugin :D Please post as an answer so I can accept... – alex Jun 16 '10 at 01:40
  • @alex +1 nice site, and looks like you've figured out the problem. it seems to work fine for me now. – Anurag Jun 16 '10 at 01:40
  • +1 - Nicely done site and interesting problem to track down :) – Nick Craver Jun 16 '10 at 01:44

1 Answers1

3

Here's your problem area:

jQuery.extend(jQuery, {
  imagesToLoad: 0,

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],

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); }
});

...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).

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

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155