1

大家好，我有一个非常简单的功能

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

动画本身，不透明度变化，非常快，但调用它时会有延迟。console.time() 报告的时间为 2540 毫秒或更大。我在想这可能是因为 div#module 正在与它的孩子一起被动画化？但这很有意义，因为我有另一个函数“disableModule”，它反向执行相同的操作并以合理的速度运行。

这是禁用模块功能，要进行的操作要多得多，但返回时间约为 242 毫秒

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

2 回答 2

3

经过一番艰苦的故障排除后，我发现它是禁用方法中浏览器检测循环的问题：

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

评论这个块让一切都加快了速度。在尝试优化其他所有内容后，我差点把头发拔掉。

于 2009-11-28T00:09:08.493 回答
1

您是否尝试过简单地重新订购它们？

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

动画是异步发生的，findandremove方法可能会消耗资源（特别是因为find遍历 DOM 树），否则这些资源可能会被用于动画。

此外，由于您在方法中动态创建“禁用屏蔽” disable，您可以将其保存

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

并在您的enable方法中使用该引用来避免 DOM walk

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

（有关文档，请参阅http://docs.jquery.com/Internals/jQuery.data$.data）

于 2009-11-26T03:00:01.240 回答