Jquery одушевленая проблема с потенциальной переменной области видимости? - PullRequest
Новая
       4

Jquery одушевленая проблема с потенциальной переменной области видимости?

2 голосов
/ 08 августа 2011

Я написал пример своей проблемы, по какой-то причине (которую я, кажется, не совсем понимаю, мои переменные теряют область видимости).Я пытаюсь анимировать несколько вещей на экране, как только они достигают своего пункта назначения, запускается функция «complete» в animate (), это предназначено для того, чтобы в основном удалить элемент dom, а также пару других функций, которые предназначеныбыть задержанным в нем.Хороший способ думать об этом - стрельба из оружия, наносить урон, когда пуля попадает, а не раньше, и урон, наносимый пулей, привязан к самой анимации.

Как я уже упоминал в моем первом предложении,Я написал пример, чтобы продемонстрировать, что именно я имею в виду.Я также вставлю выходной файл console.log, который идет с ним, и дам сводную информацию о том, что он показывает.

Я поместил пример в jsbin, так как вам, ребята, будет легче его увидеть (Надеюсь - я никогда раньше этим не пользовался).Для моего примера я только что сделал анимацию заполнения квадратного блока и нескольких квадратов, летящих рядом с ним.Когда эти квадраты достигают пункта назначения, он освобождает часть из «Jar» и сбрасывает свою анимацию, а затем удаляет себя из домена.

http://jsbin.com/ihozil/2

Вот текст console.logиз chrome: 

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 (2-й вариант) был настроен, однако, когда дело дошло до методов OnComplete, он не срабатывал, все остальные - и# I63326848 срабатывает дважды (1-й способ настройки).Я также заметил, что когда я удаляю часть .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 );
});

1 Ответ

0 голосов
/ 09 августа 2011

У меня нет хорошего ответа, но я думаю, что это может быть ошибка jQuery.Я смог обойти эту проблему, изменив метод StartFill или просто не вызывая его в первый раз в функции ready ().Я также видел, как это исчезает, когда я использую отладчик, который склонен к какой-то проблеме синхронизации ... возможно, в jQuery, возможно в браузере.Я не проверял это ни на чем, кроме Chrome, так что трудно быть уверенным.Однако я не думаю, что с вашей логикой в ​​вашем коде что-то не так.

...