手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >window resize和scroll事件的基本优化思路
window resize和scroll事件的基本优化思路
摘要:同事在项目中使用scroll事件去加载数据,结果IE下悲剧了。给了一个简单优化方法,效果明显。只要用户改变窗口大小,会对内部一些元素大小重新...

同事在项目中使用scroll事件去加载数据,结果IE下悲剧了。给了一个简单优化方法,效果明显。

只要用户改变窗口大小,会对内部一些元素大小重新计算,可能导致整个页面重新渲染,最终导致大量消耗 CPU。比如调用 resize 方法,用户改变窗口大小时会不停的被触发, 低版本的IE 会可能陷入假死状态。window的scroll事件也是如此,鼠标滚动或拖动滚动条,就会不停的触发scroll事件,如果处理的东西多,低版本的IE也会陷入假死状态。

基本的优化思路:在一定的时间之内,只执行一次resize事件函数。

复制代码 代码如下:

var resizeTimer = null;

$(window).on('resize', function () {

if (resizeTimer) {

clearTimeout(resizeTimer)

}

resizeTimer = setTimeout(function(){

console.log("window resize");

}, 400);

}

);

scroll事件优化同理。

【window resize和scroll事件的基本优化思路】相关文章:

JS排序方法(sort,bubble,select,insert)代码汇总

JQuery中Text方法用法实例分析

javascript事件冒泡实例分析

JavaScript事件的理解

JQuery自动触发事件的方法

广告显示判断

让innerHTML的脚本也可以运行起来

jQuery实现强制cookie过期方法汇总

JavaScript函数使用的基本教程

Javascript事件触发列表与解说

精品推荐
分类导航