防抖和节流
防抖:
定义:
用户操作页面时,间隔最近一次触发事件的工夫超过设定的工夫距离才会执行一次回调函数。
(在设定的工夫距离内反复触发屡次事件,只会在设定的工夫距离之后执行一次回调函数)
利用场景:
1.input输出内容时。
精简版代码:
//debouncefunction debounce(fn,delay=500){ let timer = null //timer是闭包中的 return function(){ if(timer) clearTimeout(timer) timer = setTimeout(()=>{ fn.apply(this,arguments) timer = null },delay) }}
节流:
定义:
用户操作页面时,在继续触发事件的时间段内,每过一段设定的工夫距离,就会执行一次回调函数。
利用场景:
1.拉动滚动条时。
2.滑动验证码滑块时。
3.拖拽元素时。
精简版代码:
//throttlefunction throttle(fn,delay=100){ let timer = null return function(){ if(timer) return timer = setTimeout(()=>{ fn.apply(this,arguments) timer = null },delay) }}