Javascript Jquery动画问题与潜在的变量范围问题？

我已经为我的问题写了一个例子，出于一些我似乎不完全理解的原因，我想，我的变量正在失去作用域。我正在尝试在屏幕上设置一些动画，一旦它们到达目的地，animate中的“complete”函数就会启动，这意味着基本上删除dom元素以及一些其他要延迟的函数。一个很好的方法是用枪射击，在子弹击中时而不是之前造成伤害，子弹造成的伤害与动画本身有关

正如我在第一句话中提到的，我已经写了一个例子来证明我的意思。我还将粘贴它附带的console.log输出，并给出它所显示内容的摘要

我把这个例子放在了jsbin中，希望你们能更容易地看到——我以前从未使用过这个东西。在我的例子中，我刚刚制作了一个正方形块填充的动画，一些正方形在它附近飞行。当这些方块到达目的地时，它会清空“Jar”中的一些方块并重置其动画，然后将自身从dom中移除

以下是chrome中的console.log文本：

Set Height to: 30px
Testing.Start( [Object] )
Setup #I63326848.animate()
Setup #I22596539.animate()
Setup #I14561405.animate()
Setup #I57372916.animate()
Setup #I31994195.animate()
OnComplete for :I63326848
Set Height to: 30.6px
OnComplete for :I14561405
Set Height to: 33px
OnComplete for :I57372916
Set Height to: 34.2px
OnComplete for :I31994195
Set Height to: 36px
OnComplete for :I63326848
Set Height to: 36.6px
Finished filling

正如您从上面的日志中看到的，I22596539第二个已设置，但是当涉及到OnComplete方法时，它没有启动，其他所有方法都启动了，I63326848启动了两次第一个方法设置。我还注意到，当我移除方盒罐上链的.stop部分时，这些问题不会发生。然而，这是必要的，所以我不会在最后几个动画试图填补罐子在同一时间。我还注意到，它总是第二个动画设置，这样做

所以我不完全确定它是否正在失去作用域，否则肯定会发生在其他变量身上，我在过去的几天里发送了一个suss，试图解决这个问题，我遇到了我的障碍。我已经没有东西来修理它了。你们是我最后的希望

function Jar() {
   this._iAmount = 50;
   this._iMaxAmount = 100;
   this._iRefillRate = 5;

   return this;
}
Jar.prototype = {
   ReduceAmount: function( m_iAmount ) {
      this._iAmount -= m_iAmount;

      if( this._iAmount < 0 ) {
         this._iAmount = 0;
      }
      return;
   },
   StartFill: function() {
      var iHeight = ( 60 - ( 60 * this._iAmount / this._iMaxAmount ) );

      console.log( "Set Height to: "+iHeight+"px" );
      jQuery( '#Jar' ).css( 'height', iHeight+'px' );

      if( iHeight < 60 ) {
         var iMillisecondsTilMax = ( ( this._iMaxAmount - this._iAmount ) / this._iRefillRate ) * 1000;

         jQuery('#Jar').stop().animate({height: '0px'}, iMillisecondsTilMax, function() { console.log( "Finished filling" ); } );
      }
      return;
   }
};

var Testing = {
   Start: function( m_oJar ) {
      console.log( "Testing.Start( [Object] )" );
      for( var iLoop = 0; iLoop < 5; iLoop++ ) {
         var elNewDiv = document.createElement('div');

         var iRandomValue = Math.round( 1 + ( Math.random() * ( 99999999 - 1 ) ) );
         var iAmount = Math.round( 1 + ( Math.random() * ( 5 - 1 ) ) );
         var strID = "I"+iRandomValue;

         elNewDiv.setAttribute( 'id', strID );
         elNewDiv.style.border = 'solid 1px red';
         elNewDiv.style.position = "absolute";
         elNewDiv.style.height = '200px';
         elNewDiv.style.width = '200px';
         elNewDiv.style.left = '0px';
         elNewDiv.style.top = '0px';

         document.body.appendChild( elNewDiv );

         this.Animate( m_oJar, strID, iAmount );
      }
      return;
   },
   Animate: function( m_oJar, m_strID, m_iAmount ) {
         console.log( "Setup #"+m_strID+".animate()" );
         jQuery( '#'+m_strID ).animate({ width: '30px', height: '30px', top: '100px', left: '200px' }, {
            duration: 1000,
            queue: false,
            easing: 'linear',
            complete: function() {
               console.log( "OnComplete for :"+m_strID );
               m_oJar.ReduceAmount( m_iAmount );
               m_oJar.StartFill();

               jQuery( '#'+m_strID ).remove();
            }
         });
    }
};
jQuery(document).ready( function() {
   var oJar = new Jar();

   oJar.StartFill();

   Testing.Start( oJar );
});

---

我没有一个很好的答案，但我认为这可能是一个jQuery错误。我已经能够通过修改StartFill方法来解决这个问题，或者只是不在ready函数中第一次调用它。当我使用调试器时，我也看到它消失了，调试器倾向于某种计时问题……可能在jQuery中，可能在浏览器中。除了Chrome，我还没有在其他任何设备上测试过，所以很难确定。但是，我认为您提供的代码中的逻辑没有任何错误。

我没有很好的答案，但我认为这可能是jQuery的错误。我已经能够通过修改StartFill方法来解决这个问题，或者只是不在ready函数中第一次调用它。当我使用调试器时，我也看到它消失了，调试器倾向于某种计时问题……可能在jQuery中，可能在浏览器中。除了Chrome，我还没有在其他任何设备上测试过，所以很难确定。但是，我不认为您提供的代码中的逻辑有任何错误。

请将您的问题简化为特定部分，并在此处发布一些代码。代码很长，这就是为什么我通过jsbin发布了指向它的链接。我知道我写了很多文章试图解释这个问题，但我不知道如何在不让每个人都猜到问题是什么的情况下减少这个问题？我明白。也许您可以指出您认为有问题的代码片段，并指向jsbin上的完整代码以进一步澄清。。在Testing.StartFill内的动画之前有.stop可能是原因，但是需要删除以前的动画。我这样说是因为移除它会导致所有其他运动动画正确完成，而不会重复。然而，我看不到停止影响其他元素动画，也不知道为什么这会导致变量可能失去作用域，如果粘贴的输出中发生了这种情况。请将您的问题减少到特定的部分，并在此处发布一些代码。代码很长，这就是为什么我通过jsbin发布了一个指向它的链接。我知道我写了很多文章试图解释这个问题，但我不知道如何在不让每个人都猜到问题是什么的情况下减少这个问题？我明白。也许您可以指出您认为有问题的代码片段，并指向jsbin上的完整代码以进一步澄清。。在Testing.StartFill内的动画之前有.stop可能是原因，但是需要删除以前的动画。我这样说是因为移除它会导致所有其他运动动画正确完成，而不会重复。然而，我看不到停止影响其他元素动画，我也不知道为什么这会导致变量可能失去作用域，如果粘贴输出中发生了这种情况。