Attention JavaScript gurus: Need a hand with setInterval()

Question

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

Answer 1

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