¿Por qué esta llamada jQuery .animate es tan lenta?
-
05-07-2019 - |
Pregunta
Hola a todos, tengo una función bastante sencilla
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');
}
La animación en sí misma, el cambio de opacidad, es muy rápido, pero hay una demora en llamarlo. console.time () reporta tiempos de 2540MS y mayores. Estoy pensando que puede ser porque el módulo div # está siendo animado junto con sus hijos? pero este dosent tiene sentido porque tengo otra función " disableModule " que hace lo mismo a la inversa y se ejecuta a una velocidad razonable.
Aquí está la función de Deshabilitar Módulo, mucho más en marcha pero devuelve tiempos de aproximadamente 242 ms
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');});
}
});
});
}
Solución
Después de una ardua solución de problemas, busqué un problema con el ciclo de detección del navegador en el método de desactivación:
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');});
}
});
Al comentar este bloque, todo se puso al día. Casi me arranqué el pelo después de intentar optimizar todo lo demás.
Otros consejos
¿Ha intentado simplemente reordenarlos?
module.find('.disabled_sheild').remove();
module.removeClass('disabled');
module.animate({'opacity' : '1.0'}, 300, function(){console.timeEnd('animate');});
La animación ocurre de forma asincrónica y los métodos find
y remove
podrían estar consumiendo recursos (especialmente porque find
recorre el árbol DOM) que de otra forma podrían ser acostumbrado a la animación.
También, ya que estás creando dinámicamente el " escudo desactivado " en el método disable
, puede guardarlo
module.data("disabledShield", module.prepend('<div class="disabled_sheild"></div>'));
y simplemente use esa referencia en su método de enable
para evitar el recorrido DOM
module.data("disabledShield").remove();
module.removeClass('disabled');
module.animate({'opacity' : '1.0'}, 300, function(){console.timeEnd('animate');});
(Consulte http://docs.jquery.com/Internals/jQuery.data para doc en $ .data
)