一、前言
DOM的操作比起非DOM的操作需要更多的内存和CPU的使用,连续进行过多的DOM操作会使得浏览器挂起。在使用onresize事件处理或者元素绑定拖拽事件中特别容易发生。
函数节流就是解决这种问题一种方法。
二、函数节流
函数节流就是使用定时器。当我触发一个时间时,先setTimout让这个事件延迟一会再执行,如果在这个时间间隔内又触发了事件,那我们就clear掉原来的定时器,再setTimeout一个新的定时器延迟一会执行。
三、方法
《JS高程》中封装的方法:
function throttle(method, context) {//执行函数、哪个作用域中执行
clearTimeout(methor.tId); //定时器的ID储存在执行函数的tId属性中,开始时候并不存在
method.tId = setTimeout(function(){
method.call(context); //用call确保程序在适当的执行环境中执行
}, 100);
}
function resizeDiv(){
var div = document.getElementById("myDiv");
div.style.width = 10 + "px";
console.log(this);
}
//调用
window.onresize = function(){
throttle(resizeDiv);
}
还看到有一种封装的方法
var throttle = function(fn,delay){ //执行函数、延迟时间
var timer = null;
return function(){
var context = this,args = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(context, args); //用apply把调用throttle时的this上下文传给执行函数
},delay);
}
}
//调用
window.onresize = throttle(resizeDiv,100);
四、使用场景
1、onresize事件
2、鼠标拖拽事件
3、点透的处理
。。。
其实,只要代码是周期性执行的,最好都使用节流。