防抖函数-手写(基本实现)

   <button>按钮</button>
    <input type="text">
     <!-- 本地引入:下载js文件并且本地引入 -->
     <!-- <script src="./js/underscore.js"></script> -->
     <script>
      /*
        自己实现函数需要做的事情
        1.需要接收哪些参数
        2.有什么返回值
        3.内部实现
      */
  // 手写防抖函数基本实现
      function hdcdebounce(fn,delay){
        // 用来记录上一次事件触发的timber
        let timer = null
        // 触发事件执行的函数
        const _debounce = function(){
          //2.1如果有再次触发事件(更多次),那么取消上一次事件
          if(timer){
          clearTimeout(timer)
          }
          // 2.2.延迟执行传入的回调函数
          timer = setTimeout(()=>{
            fn.apply(this)
          //2.3 函数执行后将timer重置
          timer = null
          },delay)
        }
        // 返回新的函数
        return _debounce
      }
     </script>
    <script>
      //1.获取inputEl
      const inputEl = document.querySelector("input")
      // 自己实现防抖
      let counter = 1
      inputEl.oninput=hdcdebounce(function(){
        console.log("发送网络请求",counter++,this.value)
      },500)
    </script>