調用setTimeout再次停止第一個實例

我有一個我在javascript中編寫的小遊戲，它創建了一個你點擊的地方。我想出了兩種方法讓屏幕上的「波浪」移動：調用setTimeout再次停止第一個實例

通過調用jQuery.animate（）的時間越來越長。 demo
通過recursvely調用setTimeout。 demo

我的問題是，我想的2的行爲（列的所有生長在具有偏移時序相同的速度），但1的動作（點擊後續化合物的「波」形成的）。

現在在第二個演示中，如果在「wave」結束之前再次單擊，它會立即清除setTimeouts並重新啓動它們。我希望能夠像第一個例子中那樣堆疊它們。

您可以查看這些頁面的源代碼以查看代碼（方法是getMouseXYUp和getMouseXYDown）。

什麼，我在第二個演示現在乾的基本精神在這兩個函數中發現：

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); 
     } 
    }

來源

2009-07-23 helloandre

問題是，一旦發生第二次鼠標點擊，就重置變量「左」和「右」。這是否更接近你要找的東西？

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); 
     } 
    }

來源

2009-07-23 21:21:01 edsoverflow

看代碼，看起來你有全局變量的問題。您需要在函數調用中左右傳遞，而不是在全局範圍內。

來源

2009-07-23 21:16:48 epascarello

調用setTimeout再次停止第一個實例

回答

相關問題