无论防抖还是节流,目的是减少函数执行频率或次数
先说节流,都用过水龙头吧,怎么节约水?调整阀门,水线变为点,一滴一滴,这就是节流
有个按钮, 疯狂点, 回调函数疯狂执行,就像一条线,如下图所示
函数被节流后,即使疯狂点,仍像节流后的水龙头,一滴一滴的执行
线and点.png
这是我随手画的...有点丑就别计较了
展示一下代码吧, 自己写的,可以提意见,比如把时间提出来。。。
function throttle(func){
let exec = true
let timer = null
return function(){
if(exec){
func()
exec= false
}else{
if(timer){}
else{
timer = setTimeout(()=>{
exec = true
// clearTimeout(timer)
timer = null
},1000)
}
}
}
}
节流说了,说一下防抖吧,相对于节流,防抖简单一点
防抖的思想就是在一段时间内,只延时执行一次目标函数
有一个网站,很长,就是由滚动条,如果这个网站有段类似这样的代码:
window.addEventListener('scroll',handle)
那么拉动滚动条,就会疯狂回调hanle函数
为了减少回调次数,可以使用防抖,直接上代码吧
function debounce(func){
let timer = null
return function(){
if(timer){clearTimeout(timer)}
timer= setTimeout(()=>{
func()
},1000)
}
}