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

答

问题是，一旦发生第二次鼠标点击，就重置变量“左”和“右”。这是否更接近你要找的东西？

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

答

看代码，看起来你有全局变量的问题。您需要在函数调用中左右传递，而不是在全局范围内。

调用setTimeout再次停止第一个实例

相关推荐