共计 836 个字符,预计需要花费 3 分钟才能阅读完成。
防抖
原理:把一个高频触发的事件提早 n 秒触发,在 n 秒内再次触发这个事件的话,就从新计算这个 n 秒,让事件防止频繁触发
/*
* 防抖
* 防抖的原理是:把一个高频触发的事件提早 n 秒触发,在 n 秒内再次触发这个事件的话,就从新计算这个 n 秒,让事件防止频繁触发
*/
function debounce(fn,delay) {
let timer
return function() {if(timer) {clearTimeout(timer)
}
timer = setTimeout(()=>{fn.apply(this,arguments)
},delay)
}
}
function sayHello() {console.log('Hello')
// 案例:input 框的输出关键词搜寻
document.getElementById('search').addEventListener('keyup',debounce(sayHello,500))
节流
原理:让一个高频触发的事件在 n 秒内只触发一次
/*
* 节流
* 节流的原理是:让一个高频触发的事件在 n 秒内只触发一次
*/
function throttle(fn,dalay) {
let canRun = true
return function() {if(!canRun) return
canRun = false
setTimeout(() => {fn.apply(this,arguments)
canRun = true
},dalay)
}
}
function sayHi() {console.log('Hi')
}
// 案例:input 框的输出关键词搜寻
document.getElementById('search').addEventListener('keyup',throttle(sayHi,1000))
总结
- 防抖和节流都是解决高频触发的问题的
- 防抖和节流的原理不一样,大部分场景下,两者任意抉择,只有特定场景会更好,总的来说,用哪个形式,看本人的业务需要
- 防抖和节流必定不止这一种,这里只是最常见的一种
正文完