js防抖概述

当用户频繁请求后台接口，比如搜索框输入事件触发查询后台数据的场景，会增加浏览器请求的负担。为避免此类问题需要延时处理用户的查询请求，当设定的延迟时间还未到用户又触发输入事件，就重置延迟处理用户的查询请求。这种处理方式即为防抖。

js防抖的实现

下面介绍输入框输入数据实时模糊筛选表格中的数据是怎么使用js防抖的。

    debounce(fn,wait){
     if(this.timer!=null){
       clearTimeout(this.timer)
     }
     this.timer=setTimeout(fn,wait)
    },

解释：

• 这里的参数：fn为请求后台数据的封装函数
• 参数:wait为延时多久请求后台数据
  
  在输入框输入事件的回调函数中调用防抖方法

listeninputEvent(val){
   if(typeof val=='string'){
       if(val.trim().length!=0){
         this.debounce(this.getlinkWorkrder(), 500)
       }
      }
      if(val==''){
        this.debounce(this.getlinkWorkrder(),500)
      }
}

解释：

• 这里的 if(val==''){this.debounce(this.getlinkWorkrder(),500)}代码的作用是：当情况搜索输入框数据时进行搜索重置。
• getlinkWorkrder()函数时请求后台数据的封装方法。