jQuery resize() 和 scroll() 的优化

一、resize()

在最近的一个jQuery插件中，我使用到了jQuery中的resize()方法来检测用户调整浏览器窗口并运行相关代码。能够注意到resize window时各个浏览器的性能消耗不一。

    #IE、Safari、Chrome在调整窗口变化中一直在执行resize事件

    #Opera则在这个过程当中发生了不少次resize事件，但在结束调整时执行。

    #Firefox则是只在调整结束后才执行事件。

 咱们想要的明显是在结束调整以后才执行事件。幸运的是咱们能够经过如下几种方法来调整:

调整运行时间

1. 建立一个在你发生调整时须要执行的任意代码的函数。
2. 使用resize()方法，你能够运行函数并给它设置一个超过期间执行，从而达到在某一段时间内执行一次函数

(function($) {
    var resizeTimer; 
    function resizeFunction() {
        // 处理函数
    };
    
    $(window).resize(function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(resizeFunction, 250);//咱们能够适当调整时间间隔
    });
    resizeFunction();//首次运行
})(jQuery);

 

二、scroll()

一样的，咱们对滚动监听也能够作一样的处理

(function($) {
    var scrollTimer; 
    function scrollFunction() {
        // 处理函数
    };
    
    $(window).scroll(function() {
        clearTimeout(scrollTimer);
        scrollTimer = setTimeout(scrollFunction, 250);//咱们能够适当调整时间间隔
    });
})(jQuery);