appeler setTimeout arrête à nouveau la première instance

Question

J'ai un petit jeu trivial que j'ai écrit en javascript qui crée une vague d'où vous cliquez. J'ai trouvé deux façons de faire bouger la "vague" à travers l'écran:

1. en appelant jQuery.animate() avec des temps de plus en plus grands. Par l'appel récursif setTimeout
2. . demo

Le problème était que je veux le comportement de deux (colonnes croissent toutes à la même vitesse avec un décalage de synchronisation) mais avec l'action d'une (clic subséquent des composés des « ondes » formées).

Dès maintenant sur la deuxième démo, si vous cliquez à nouveau avant que la "vague" ne soit terminée, elle efface immédiatement setTimeouts et les recommence à zéro. Je veux pouvoir les empiler comme dans le premier exemple.

Vous pouvez afficher la source de l'une de ces pages pour voir le code (les méthodes getMouseXYUp et getMouseXYDown).

l'essence de base de ce que je fais dans la deuxième démo se trouve dans ces deux fonctions:

function getMouseXYUp(e) { 
      $("body").die('mousemove'); 

      h = (document.height - e.pageY + 17); 
       left = id-1; 
       right = id+1; 
      setTimeout("moveleft()", 100); 
      setTimeout("moveright()", 100); 

      return true 
     } 

function moveleft(){ 
     if (left >= 0){ 
      $("#div"+left).animate({'height': h}, 400); 
      left--; 
      setTimeout("moveleft()", 50); 
     } 
    } 

Answer 1

Le problème est que vous réinitialisez les variables "left" et "right" dès que le second clic de souris se produit. Est-ce plus proche de ce que vous cherchez?

function getMouseXYUp(e) { 
     $("body").die('mousemove'); 

     var h = (document.height - e.pageY + 17); 
     var left = id-1; 
     var right = id+1; 
     setTimeout(function() { moveleft(left, h); }, 100); 
     setTimeout(function() { moveright(right, h); }, 100); 

     return true; 
    } 

    ... 

    function moveleft(left, h) { 
     if (left >= 0){ 
      $("#div"+left).animate({'height': h}, 400); 
      left--; 
      setTimeout(function() { moveleft(left, h); }, 50); 
     } 
    } 

    function moveright(right, h) { 
     if (right < divs){ 
      $("#div"+right).animate({'height': h}, 400); 
      right++; 
      setTimeout(function() { moveright(right, h); }, 50); 
     } 
    } 

Answer 2

En regardant le code, on dirait que vous avez des problèmes avec les variables globales. Vous devrez passer à gauche et à droite dans les appels de fonction et ne pas l'avoir dans une portée globale.