événement jQuery manipulation avec le problème .live() setInterval et clearInterval

Question

jQuery 1.4.2:

J'ai une image. Lorsque l'événement mouseover est déclenché, une fonction exécute une boucle pour charger plusieurs images. Au contraire, l'événement mouseout doit remettre l'image à une image prédéterminée et ne plus exécuter la boucle. Ce ne sont que pour les images avec classe « pouce »:

$("img.thumb").live("mouseover mouseout", function(event) { 
    //var foo = $(this).attr('id'); 
    var wait; 
    var i=0; 
    var image = document.getElementById(foo); 

    if (event.type == 'mouseover') { 
     function incrementimage() 
     { 
      i++; 
      image.src = 'http://example.com/images/file_'+i+'.jpg'; 
      if(i==30) {i=0;} 
     }  
     wait = setInterval(incrementimage,500); 
    } else if (event.type == 'mouseout') { 
     clearInterval (wait); 
     image.src = 'http://example.com/images/default.jpg'; 
    } 
    return false; 
}); 

Quand je mouseOut, l'image est définie sur la default.jpg mais le navigateur continue à boucle si les images. Ça ne s'arrêtera jamais. Quelqu'un peut-il me frapper avec des connaissances? Merci.

Answer 1

Le problème est que l'événement mouseout ne voit pas le même wait que l'événement mouseover a fait. Vous devez le stocker ailleurs. Je suggère d'utiliser [data()][1] pour le stocker sur l'élément.

En outre, cette séquence n'a pas de sens:

var foo = $(this).attr('id'); 
... 
var image = document.getElementById(foo); 

this est déjà l'élément d'image.

Enfin, ce n'est pas comme ça que je définirais la fonction. Essayez quelque chose comme:

$("img.thumb").live("mouseover", function(evt) { 
    var wait = $(this).data("wait"); 
    if (!wait) { 
    clearInterval(wait); 
    } 
    var i = 0; 
    var image = this; 
    var incrementImage = function() { 
    i++; 
    image.src = "http://example.com/images/file_" + i + ".jpg"; 
    if (i == 30) { 
     i = 0; 
    } 
    } 
    wait = setInterval(incrementImage, 500); 
    $(this).data("wait", wait); 
    return false; 
}); 

$("img.thumb").live("mouseout", function(event) { 
    var wait = $(this).data("wait"); 
    if (wait) { 
    clearInterval(wait); 
    } 
    img.src = "http://example.com/default.jpg"; 
    return false; 
}); 

Answer 2

Avez-vous essayé de déplacer votre var wait en dehors de votre événement .live()?

var wait 
$("img.thumb").live("mouseover mouseout", function(event) { 

Answer 3

Vous pouvez réduire votre code à ceci pour effacer l'intervalle correctement:

$("img.thumb").live("mouseover", function() { 
    var i = 0, image = this, incrementimage = function() { 
    i++; 
    image.src = 'http://example.com/images/file_'+i+'.jpg'; 
    if(i==30) {i=0;} 
    }; 
    $(this).data('timer', setInterval(incrementimage,500)); 
}).live("mouseout", function() { 
    clearInterval($(this).data('timer')); 
    this.src = 'http://example.com/images/default.jpg'; 
}); 

Ce divise les .live() appels à faire la logique un peu plus propre, et stocke le précédent wait id sur l'élément lui-même en utilisant .data() au lieu de comme une variable globale.