代码实现
防抖:
就是指连续触发事件但是在设定的一段时间内中只执行最后后一次,例如:设定1000毫秒执行,当你触发事件了,他会1000毫秒后执行,但是在还剩500毫秒的时候你又触发了事件,那就会重新开始1000毫秒之后在执行。
记忆核心:重新开始
应用场景:搜索框搜索输入 文本编辑器实时保存
let timerId = null
document.querySelector('.int').onkeyup = function(){
// 防抖
if(timerId!== null){
clearInterval(timerId)
}
timerId = setTimeout(() => {
console.log("我是防抖");
}, 1000);
}
节流:
就是指连续触发事件但是在设定的一段时间内中只执行一次函数。例如:设定1000毫秒执行,那你在1000毫秒触发在多次,也只在1000毫秒后执行一次
记忆方法:不要打断我
应用场景:高频事件 例如 快速点击,鼠标滑动,resize事件,scroll事件。下拉加载 视频播放等。
let timerId = null
document.querySelector('.int').onmouseover = function(){
// 节流
if(timerId!== null){
return
}
timerId = setTimeout(() => {
console.log("我是节流");
timerId = null
}, 1000);
}
其实,我开发一般用lodash库,利用里面的debounce(防抖)和throttle(节流)来做的。