函数防抖与节流,网上的内容参差不齐,很容易弄混淆,本文不针对定义来说明什么是防抖,什么是节流,直接 show me your code。值得一提的是高程3也把防抖与节流弄混淆了。
函数防抖: 任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行
作用:使连续的函数执行降低到一次
机理:清除定时器:
function debounce(fn,delay){
var context,args;
var timerId = null
return function(){
context = this
args = arguments
if(!timerId){
timerId =setTimeout(function(){
timerId = null
fn.apply(context,args)
},delay)
}
}
}
函数节流: 指定时间间隔内只会执行一次任务
机理:用一个变量来标记
function throttle(fn,delay){
var context,args;
var flag = true
return function(){
context = this
args = arguments
if(!flag){return;}//如果为true继续执行,否则return;然后将flag设置为false
flag = false;//先执行,当 setTimeout 还未执行的时候,flag 这个标记始终为 false,在开头的判断中被 return 掉
setTimeout(function() {
flag = true;//后执行,,表示可以执行下一次的循环了,因此flag = false会在delay时间后被覆盖,此时flag为true就继续执行
fn.apply(this, arguments);
}, delay);
}
}
其实函数节流与函数防抖的原理非常简单,巧妙地使用 setTimeout 来存放待执行的函数,这样可以很方便的利用 clearTimeout 在合适的时机来清除待执行的函数。
使用函数节流与函数防抖的目的,就是为了节约计算机资源,提高性能