Attention gourous JavaScript: Besoin d'une main avec setInterval ()

Question

Je suis en train de faire un affichage non interactif pour une véritable fenêtre shop immobilier.

Il a été un moment que je l'ai joué avec setInterval().

La première fois que mon script par étapes, il est très bien. Mais quand il tente d'obtenir la propriété suivante via getNextProperty(), il commence à se détraquer. Si vous avez Firebug, ou une sortie équivalente de console.log(), vous verrez qu'il appelle les choses il ne faut pas!

Maintenant, il y a un peu de juste de JavaScript, donc je me sentirai mieux lier à elle que l'affichage tout.

Afficher magasin

JavaScript Offending

Il convient de mentionner tout mon DOM / AJAX est fait avec jQuery.

Je l'ai essayé mieux pour vous assurer que clearInterval() fonctionne, et il semble ne pas fonctionner de code en dessous.

Le setInterval() est utilisé pour précharger l'image suivante, puis l'afficher dans la galerie. Lorsque l'intervalle Détecte nous sommes à la dernière image ((nextListItem.length === 0)), il est destiné à effacer cet intervalle et recommencer avec une nouvelle propriété.

Il a été me rend dingue pendant un certain temps maintenant et toute personne capable de me aider?

Il est probablement quelque chose de vraiment évident!

Merci!

Mise à jour

Eh bien, maintenant je me sens mieux connaître le problème était mon naïveté d'assumer des plugins fonctionnerait hors de la boîte.

Je l'ai fait obtenir ce plug-in de une réponse sur Stack Overflow . J'ai alerté l'auteur de cette question.

Merci pour toutes vos réponses!

Answer 1

Voici votre zone de problème:

jQuery.extend(jQuery, {
  imagesToLoad: 0,

Le problème est que cette variable est globale / partagée (jQuery.imagesToLoad), de sorte que cette vérification plus tard:

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

Dépend de ce plug-in ne pas être appelé deux fois en même temps, sinon que si le chèque va noix, puisque vous appelez plus tard dans votre code:

$.preloadImages({
  urls: [nextImage],

Ce nombre tombe à 1, ce qui rend la if évaluer à true pas seulement sur la dernière image, mais toutes les images après le premier jeux après la première (en raison de lors de l'exécution de rappel, il chevauche dans le temps), ce qui provoque le rappel de complete au feu plusieurs fois, pas seulement une fois, donc ce code:

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

... voit que la fonction en cours d'exécution complete nombre fois, alors vous commencez nombre intervalles en même temps (ce qui est la raison pour laquelle vous voyez console.log('show property called' + property.slug) exécuter tant de fois dans le journal).

Court fix: remplacer le code preloadImages avec une version qui n'utilise pas une variable globale:)