1.防抖

单位时间内，频繁触发事件，只执行最后一次

典型场景

搜索框搜索输入

代码实现思路：利用定时器,每次触发先清除以前的定时器（重新开始）

<body>
    <input type="text">
    <script>
        let inp = document.querySelector("input");
        let t = null
        inp.oninput = function () {
            // 防抖
            if(t !== null) {
                clearTimeout(t);
            }
            t = setTimeout(() => {
                console.log(this.value);
            }, 500)
        }
    </script>
</body>

防抖的工作原理：

当事件持续触发时，只有在事件停止触发n秒后，才会执行函数
如果n秒内事件被重新触发，那么之前的计时器会被重置
常用于模糊搜索、短信验证、文本编辑器实时保存等场景

2.节流

单位时间内，频繁触发事件，只执行一次

应用场景：

高频事件，如：快速点击、鼠标滑动、resize事件，scroll事件
下拉加载
视频播放记录事件等

实现思路，也是利用定时器，等定时器执行完毕，才开启定时器（不要打断）

代码示例

<body>
     <button class="ipt">按钮</button>
    <script>

        let timerId = null
            document.querySelector('.ipt').onclick = function () {
                // 节流
                if (timerId !== null) {
                    return
                }
                timerId = setTimeout(() => {
                    console.log('我是节流')
                    timerId = null
                }, 1000)
            }
    </script>
</body>

注：setTimeout 函数返回一个整数，这个整数作为计时器的唯一标识符。可以通过 clearTimeout 函数使用这个标识符来取消计时器

3. lodash库

开发中一般用lodash库，利用里面debounce（防抖）和throttle（节流）来做

节流和防抖

1.防抖

2.节流

3. lodash库