jQuery resize() 和 scroll() 的优化

1、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);

 

2、scroll()

同样的，我们对滚动监听也可以做同样的处理

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