防抖：
就是指连续触发事件但是在设定一段时间内种 只执行最后一次
列如：设定1000毫秒执行，当你触发事件了，他会1000毫秒后执行，但是还剩500毫秒的时候你又触发了事件，那就会重新开始1000毫秒之后再执行
记忆核心：从新开始
应用场景： 搜索框搜索，文本编辑器实时保存
代码实现：定时器
let timer = null;
let doc = document;
doc.querySelector('#myInput').onkeyup = () => {
if (timer !== null ) clearTimeout(timer);
timer = setTimeout(() => {
console.log('我是防抖')
}, 1000)
}
节流：
就是指连续触发事件但是在设定的一段时间内种只执行一次函数。
列如：设定1000毫秒执行，那你在1000毫秒触发在多次，也只在1000毫秒后执行一次
记忆方法：不要打断我
场景：高频事件 快速点击，鼠标滑动，resize事件,scroll事件，下拉加载，视频播放记录时间等
let timer = null;
let doc = document;
doc.querySelector('#myInput').onmouseover = () => {
if (timer !== null ) return;
timer = setTimeout(() => {
console.log('我是节流')
timer = null
}, 1000)
}
一般用lodash库方法[debounce(防抖)和throttle(节流)来做的
以上就是防抖和节流全部内容,感谢大家支持自学php网。
