防抖和节流是前端应用开发中常见的两个功能,其原理都是利用闭包,缓存延迟时间。常用于窗口的resize、scroll,输入框内容校验等操作。
(1)防抖,思路:在规定时间内未触发第二次,则执行,代码如下
function debounce(fn, delay) {
let time = null ; //定时器
delay = delay || 500
//利用闭包,缓存delay
return function() {
let arg = arguments
if(time) {
clearTimerOut(time)
}
time = setTimerOut(()=>{
fn.apply(this,arg)
},delay)
}
}
(2)节流,当持续触发事件时,保证一定时间段内只调用一次
function throttle(fn,delay) {
let pre = Date.now()
deley = delay || 500;
return function(){
let nowT = Date.now()
let arg = arguments
if(nowT - pre > = delay ) {
fn.apply(this ,arg)
pre = Date.now()
}
}
}