一、防抖：多次触发事件，事件处理函数只执行最后一次。
    二、实现方式就是如果任务触发的频率比我们设定的时间要小，那么我们就清除掉上一个任务重新计时

    | 【示例】防抖```javascript function debounce(fn, interval) { let timer = null return function() { // 如果用户在设定的时间内再次触发,就清除掉 clearTimeout(timer) timer = setTimeout(() => { fn.apply(this, arguments) }, interval); } }

    1.  |
    2. | --- |
    4. | 【示例】防抖```javascript
    5. /**
    6.  * 防抖函数  一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效
    7.  * @param fn要被节流的函数
    8.  * @param delay规定的时间
    9.  */
    10. function debounce(fn, delay) {
    11.     //记录上一次的延时器
    12.     var timer = null;
    13.     return function () {
    14.        //清除上一次的演示器
    15.         clearTimeout(timer);
    16.         //重新设置新的延时器
    17.         timer = setTimeout(function(){
    18.             //修正this指向问题
    19.             fn.apply(this);
    20.         }, delay);
    21.     }
    22. }
    23. document.getElementById('btn').onclick = debounce(function () {
    24.     console.log('按钮被点击了' + Date.now());
    25. }, 1000);

    | | —- |

    三、使用场景：

    • 搜索框搜索输入，并在输入完后自动搜索
    • 手机号，邮箱验证输入检测
    • 窗口大小resize变化后，再重新渲染

    四、无论是防抖还是节流，我们都可以使用下面的这种方式去验证一下

    | 【示例】防抖验证：```javascript

    window.onresize = debounce(function () { console.log(1) }, 1000) ``` | | —- |

    五、防抖和节流我们都是借助 setTimeOut 来实现，不同的地方就是 清除定时器的位置