Question

我写了一个我的问题的例子，出于某些原因（我似乎并不完全理解），我的变量正在失去范围。我试图在屏幕上制作几个动画，一旦它们到达目的地，animate（）内的'完整'功能就会启动，这意味着基本上删除了dom元素以及其他几个函数在其中推迟。想到它的一个好方法是射击枪，当子弹击中而不是之前受到伤害，子弹所造成的伤害与动画本身联系在一起。

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

我把这个例子放在jsbin中，因为你们应该更容易看到（我希望 - 我之前从未使用过这些东西）。在我的例子中，我只是做了一个正方形块填充的动画，并且在它附近飞行了一些正方形。当这些方块到达目的地时，它会将一些空格从“Jar”中清空并重置其动画，然后将其从dom中移除。

http://jsbin.com/ihozil/2

以下是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被触发两次（第一个方法设置）。我也注意到，当我在方形框（#Jar）上删除链的.stop（）部分时，这些问题不会发生。然而，这是必要的，所以我最终没有尝试几个动画同时填充jar。我也注意到它总是设置的第二个动画。

所以我不完全确定它是否会失去范围，否则这肯定会发生在其他人身上，我已经发送了最近几天试图将这一个推出来并且我已经遇到了障碍。我已经用尽了一些东西试图修复它。你们是我最后的希望！

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

Answer 1

我没有很好的答案，但我认为这可能是一个jQuery错误。我已经能够通过修改StartFill方法来解决这个问题，或者只是第一次在ready（）函数中调用它。当我使用调试器时，我也看到它消失了，因为调试器倾向于某种时序问题......可能在jQuery中，可能在浏览器中。我没有在除Chrome之外的任何东西上进行测试，因此很难确定。但是，我认为您提供的代码中的逻辑没有任何问题。

Jquery使用潜在的变量范围问题制作动画问题？

1 个答案: