jq scroll()和resize() 的优化

在最近的一个项目中我使用到了jq中的scroll()和resize()方法来检测用户滚动/调整浏览器窗口并运行相关代码。可以注意到scroll()、resize()在各种浏览器的性能消耗不一。

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

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

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

 我们想要的明显是在结束调整之后才执行事件。幸运的是我们可以通过以下几种方法来调整:

调整运行时间

创建一个在你发生调整时需要执行的任意代码的函数。

可以运行函数并给它设置一个超过时间执行，从而达到在某一段时间内执行一次函数

我们对滚动监听的处理：

(function($) {
    var scrollTimer; 
    function scrollFunction() {
        // 处理函数
    };
    
    $(window).scroll(function() {
        clearTimeout(scrollTimer);
        scrollTimer = setTimeout(scrollFunction, 100);//我们可以适当调整时间间隔
    });
})(jQuery);

同样的，我们对resize()也可以做同样的处理

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