jQuery - Comment supprimer un gestionnaire d'événements uniquement lorsqu'une animation ou une fonction est en cours d'exécution?

Question

Je tente de créer une galerie d'images. En bas, j'ai une bande de vignettes, ces vignettes glissent à gauche et à droite lorsque vous cliquez sur une flèche, mais si vous cliquez plusieurs fois sur la flèche, elle interroge la fonction.

Je souhaite supprimer le gestionnaire de clics pendant l'exécution de la fonction, puis le remplacer à nouveau. Sur une note de côté, mon défileur de vignettes utilise la marge gauche pour animer, est-il possible d'utiliser scrollTo ou similaire, pour déplacer un élément d'un montant spécifique, horizontalement, donc si les vignettes changent de taille, cela fonctionnerait encore?

Answer 1

Il y a plusieurs façons de le faire. Le plus simple est de ne pas supprimer le gestionnaire de clic, mais simplement ne rien faire dans le rappel si elle est animant déjà, par exemple:

$('.thumb').click(function() { 
    if ($('#thumb-strip:animated').size() != 0) 
     return; 

    /* else animate #thumb-strip */ 
}); 

Si vous souhaitez supprimer le gestionnaire de clic, et l'ajouter avant, ne ceci:

var animateHandler = function() { 
    var params = {}; // animate params 
    $('.thumb').unbind('click', animateHandler); // unbind the click handler 
    $('#thumb-strip').animate(params, function() { 
     $('.thumb').click(animateHandler); // re-bind the click handler when animation is done 
    }); 
}; 
$('.thumb').click(animateHandler); 

Inutile de dire que la première façon est plus simple.

Cependant, ce que je fais habituellement n'empêche pas l'événement click de se produire, parce que l'utilisateur ne s'y attendra pas, mais je veux aussi me débarrasser de la file d'attente des animations. Donc ce que vous pouvez faire est de permettre à l'utilisateur de cliquer sur un pouce, et le faire animer instantanément à la nouvelle place avec stop:

$('.thumb').click(function() { 
    var params = {}; // animate params 
    $('#thumb-strip').stop().animate(params); 
}); 

Ceci est la solution la plus simple et la plus intuitive.

Et pour répondre à votre deuxième question, vous pouvez utiliser $(this).position() pour obtenir la position relative du pouce par rapport au parent, puis l'animer en fonction de cela.