warum ist der jQuery .animate Anruf so langsam?

Question

Hallo zusammen Ich habe eine ziemlich geradlinig Funktion

enableModule : function(moduleName){
        var module = $('div#'+moduleName);
        console.log('enabling '+moduleName);
        console.time('animate');
        module.animate({'opacity' : '1.0'}, 300, function(){console.timeEnd('animate');});
        module.find('.disabled_sheild').remove();
        module.removeClass('disabled');
        console.log('end of enable Module');
    }

Die Animation seiner selbst, die Opazität zu ändern, ist sehr schnell, aber es ist wie eine Verzögerung bei der es aufgerufen wird. die console.time () meldet Zeiten 2540MS und größer. Ich denke, es kann sein, weil der div # Modul ist mit seinen Kindern zusammen animiert werden? aber diese dosent Sinn machen, weil ich eine andere Funktion „disableModule“ haben, die das gleiche in umgekehrter Richtung funktioniert und läuft mit einer angemessenen Geschwindigkeit.

Dies ist die Funktion sperren Modul, mehr geht deutlich aber gibt Zeiten von etwa 242ms

disableModule : function(moduleName){
      $('div#'+moduleName+', div.'+moduleName).each(function(){
        var module = $(this);
        module.prepend('<div class="disabled_sheild"></div>');
        var sheild = module.find('.disabled_sheild');
        sheild.css({'position' : 'absolute', 'z-index' : '200'});
        sheild.width(module.width());
        sheild.height(module.height());
        jQuery.each(jQuery.browser, function(i) {
            if($.browser.msie){
               //module.css("display","none");
               //if using ie give sheild a transparent background layout
            }else{
              console.time('animate');
              module.animate({'opacity' : '0.5'}, function(){ console.timeEnd('animate');});
            }
          });
      });
    }

Answer 1

Nach einiger mühsamen Fehlerbehebung ich es aufgespürt ein Problem mit der Browser Erfassungsschleife in der Sperrmethode zu sein:

  jQuery.each(jQuery.browser, function(i) {
      if($.browser.msie){
         //module.css("display","none");
         //if using ie give sheild a transparent background layout
      }else{
        console.time('animate');
        module.animate({opacity : 0.5}, 200, function(){console.timeEnd('animate');});
      }
    });

Kommentar dieser Block heraus alles bringt bis zu beschleunigen. Ich zog fast meine Haare nach dem Versuch, alles andere zu optimieren.

Answer 2

Haben Sie versucht, einfach wieder ording sie?

module.find('.disabled_sheild').remove();
module.removeClass('disabled');
module.animate({'opacity' : '1.0'}, 300, function(){console.timeEnd('animate');});

Animation geschieht asynchron und die find und remove Methoden Ressourcen verbraucht werden (vor allem, da find geht den DOM-Baum), die sonst für die Animation verwendet werden könnte.

Auch da Sie dynamisch das „disabled Schild“ in dem disable Verfahren zu schaffen sind, können Sie sie speichern off

module.data("disabledShield", module.prepend('<div class="disabled_sheild"></div>'));

und verwenden Sie nur diese Referenz in Ihrer enable Methode, um den DOM zu Fuß zu vermeiden

module.data("disabledShield").remove();
module.removeClass('disabled');
module.animate({'opacity' : '1.0'}, 300, function(){console.timeEnd('animate');});

(Siehe http://docs.jquery.com/Internals/jQuery.data für doc auf $.data)