封装函数防抖

什么是函数防抖？

在做搜索框的联想词时，会根据用户输入的内容获取相关的联想词，如果没有函数防抖就会出现下图这样

频繁的触发input事件，同时跟后台产生频繁的数据交互，浪费性能，从而引出了防抖

防抖该如何使用？

简单的来说，防抖就是一个延时器

在用户输入内容之前加上延时器在用户输入完毕之后的几毫秒再去发送请求，只需要用户输入的最后一次内容，
简单的对代码进行优化，就可以实现下图的目标

<body>
    <input type="text">
    <script>
      let ipt = document.querySelector('input');
      let timer = null;
      ipt.oninput = function(){
        timer && clearTimeout(timer) ;
        timer = setTimeout(()=>{
        console.log(this.value);
      },500)
      }
    
    </script>
</body>

已经可以实现防抖的功效了，接下来封装一下

<body>
    <input type="text">
    <script>
      let ipt = document.querySelector('input');
      ipt.oninput = debounce(function(){
        // 业务代码 dosomting
        console.log(this.value);
      },500);
      function debounce(fn,delay){
        let timer = null;
        return function(){
            timer && clearTimeout(timer) ;
            timer = setTimeout(()=>{
            // 业务代码 这里的this指向的是window，通过调用call方法使其指向input
            fn.call(this)
          },delay)
        }
      }
    
    </script>
</body>

这里面用到了call方法 , 详细请看我的另一篇文章

在vue中使用的时候，将其上面代码放入你的工具js文件中，import引入调用即可