防抖的原理使用和封装

原理：

setTimeout方式，在一定事件内，多次触发变成一次触发，多次触发每次结束会清空定时器。

目的：提高性能，减少用户请求或其他，优化用户体验

主要场景

1 scroll事件滚动触发，
2 搜索框输入查询
3 表单验证
4 按钮提交事件
5 浏览器窗口缩放，resize事件

1.  按钮的点击防抖(未封装）

<button id="result">防抖函数</button>
    <script>
      let result = document.getElementById("result");
      timer = null;
      result.onclick = function () {
        clearInterval(timer);
        timer = setTimeout(() => {
          console.log("触发定时器");
        }, 500);
      };
    </script>

2.  按钮的点击防抖(封装后）

<button id="result">防抖函数</button>
    <script>
      //获取元素
      let result = document.getElementByI