同一个操作会连续触发某个行为时,为了防止因为频繁执行DOM操作、资源加载等重行为,导致UI停顿甚至浏览器崩溃,我们需要做一定的限制。
所谓函数节流,是指某连续操作,前后两次操作的时间间隔达到我们的设置,才去执行对应行为。
函数防抖是函数节流的变种,如果我们希望,即使连续操作时间间隔没有达到我们的预期,也会在经过一定时间后,保证对应行为会执行一次。
function throttle(method , duration ,delay ){
var timer = null,
// 记录下开始执行函数的时间
begin = new Date();
return function(){
var context = this,
args = arguments,
// 记录下当前时间
current = new Date();
// 函数节流里的思路
clearTimeout(timer);
// 记录下的两个时间相减再与duration进行比较,如果这里不做duration的判断,那就是简单的函数节流
if(current-begin >= duration){
method.apply(context , args);
begin = current;
}else{
timer = setTimeout(function(){
method.apply(context , args);
} , delay);
}
}
}
window.onresize = throttle(function(){console.log('resize')},1000,500)
感觉被underscore.js中的throttle和debounce坑了,正好两个意思相反。