setTimeoutを呼び出すと、最初のインスタンスが再び停止します

Question

私はクリックする場所からの波を作成するJavaScriptで書かれた小さなゲームを持っています。

1. ますます大きな回jQuery.animate（）を呼び出すことによって：私は「波」が画面を横切って移動させるには二つの方法を考え出しました。 demo
2. 再帰的にsetTimeoutを呼び出すことによって。 demo

私が持っている問題は、私は2の振る舞いをしたいということである（列すべてがタイミングオフセットと同じ速度で成長する）が、（その後のクリックが形成された「波」化合物）1の作用を持ちます。

今すぐ2回目のデモで、 "wave"が終了する前にもう一度クリックすると、すぐにsetTimeoutsがクリアされ、すべてが再び開始されます。私は最初の例のようにそれらを積み重ねることができるようにしたい。

これらのページのソースを表示して、コードを表示できます（メソッドはgetMouseXYUpとgetMouseXYDownです）。

私は2番目のデモでやっているものの基本的な骨子は、この2つの機能で発見された：あなたはグローバル変数との問題を抱えているよう

コードを見てみると

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

問題は、2回目のマウスクリックが発生するとすぐに変数「left」と「right」をリセットしてしまうことです。これはあなたが探しているものに近いですか？

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

、見えます。関数呼び出しで左右に渡す必要があり、グローバルスコープでは使用しないでください。