防抖：

就是指连续触发事件但是在设定一段时间内种 只执行最后一次

列如：设定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网。