Arrêter les animations jQuery

Question

Mon JavaScript est la suivante:

$.get("/<page>.php", "userid='.$userid.'&"+status, function(data){ 
     $("#status").show("fast").html(data).delay(4000).hide("fast"); 
    }); 

J'ai beaucoup de liens sur une page qui charge cette jQuery AJAX et afficher l'état dans un div correctement. Tout fonctionne bien, sauf si un utilisateur clique sur un grand nombre de liens très rapidement. Les données changent correctement, mais les animations sont retardées. J'ai essayé d'inclure le jQuery stop() et stop(true) et stop(true, true) avant le .show mais cela ne semble pas aider beaucoup. Les animations peuvent continuer longtemps après le dernier clic. Par exemple, si un utilisateur clique 20 fois, puis s'arrête, les animations de masquage semblent continuer longtemps après, malgré l'arrêt(). Ce que je veux, c'est que si un utilisateur clique sur un autre lien qui provoque l'AJAX pour provoquer un affichage d'état, le "réinitialise" essentiellement les animations d'état.

Des idées?

Voici le plein JavaScript concerné:

<script type="text/javascript"> 
    ... 
     $(document).ready(function() { 
      $("#entry a.styled").live("click", function(event){ 
     var status = $(this).attr("rel")+"&game="+$(this).attr("name"); 
     var teamid = $(this).attr("rel");  
     var gameid = $(this).attr("name"); 
     $("[name="+gameid+"]").show(1); 
     $(this).hide(1); 
     $("[rel=t"+teamid.replace("pick=", "")+"]").removeClass(); 
     $("[name=t"+gameid+"]").removeClass(); 
     $("#t"+teamid.replace("pick=", "")).addClass("hilite"); 
     $.get("/<filename>.php", "userid=1&"+status, function(data){ 
      $("#status").stop(true, true).show("fast").html(data).delay(4000).hide("fast"); 
     }); 
    }); 
    </script> 

et certains HTML pertinents, c'est dans une plus grande table:

<tr class="row-a"> 
    <td>8-man</td> 
    <td>1:00 pm</td> 
    <td class="hilite" id="t298" rel="t233" name="t3235"><a href="/team/la_veta/2010/">La Veta</a></td> 
    <td><a href="#" style="display:none" name="3235" class="styled" rel="pick=298">Pick</a></td> 
    <td><a href="#" name="3235" class="styled" rel="delete=3235"><img src="/images/delete.png" height="12" width="12" /></a></td> 
    <td><a href="#" name="3235" class="styled" rel="pick=233">Pick</a></td> 
    <td id="t233" rel="t298" name="t3235"><a href="/team/south_park/2010/">South Park**</a></td> 
    <td>&nbsp;</td> 
</tr> 

L'utilisateur cliquait sur le lien "Pick" ou la suppression image qui appelle le jQuery AJAX obtenir.

Toutes les autres améliorations apportées à mon code (illustré ci-dessous) sont également appréciées.

version jquery: version 1.4.2 jQueryUI: 1.7.2

Answer 1

Peut-être arrêter() n'efface pas le retard() - Avez-vous essayé la méthode .clearQueue()?

alternativement, vous pouvez essayer avec setTimeout plutôt que de retarder() ...

// animInProgress and animDelay are global variabes 
var animInProgress = false; 
var animDelay; 

//later, in your $.get success function... 
$("#status").show("fast").html(data); 
if(animInProgress) { 
    clearTimeout(animDelay); 
} 
animInProgress = true; 
animDelay = setTimeout(function() { 
    $("#status").hide("fast"); 
    animInProgress = false; 
}, 4000);