jQuery resize() 和 scroll() 的优化

1、resize()

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

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

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

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

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

调整运行时间

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

使用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);