js函数防抖和节流

函数防抖（debounce）

触发事件在 n 秒内只会执行一次函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间作用就是限制触发任务（接口调用）的频率，一般用于关键字搜索，表单验证

demo：

handleSearch: function () {
  //固定时间内，没有触发特定条件(输入框字符变化)，那么触发一次任务（接口调用）
  //触发时，销毁之前的定时任务
  clearTimeout(this.timer)
  //创建一个定时任务
  this.timer = setTimeout(async () => {
   //执行搜索关键字
   axios.get('https://me.csdn.net/weixin_45426836', {
     params: {
       query: this.keyword
     }
 }).then(function (data) {
      console.log(data)
      this.list = data
 }).catch(function (err) {
      console.log(err)
 })
  }, 1000)
}

函数节流（throttle）

连续触发事件在一定时间内只会执行一次函数，作用就是限制触发任务（接口调用）的频率，一般用于页面触底加载更多

demo：

onReachBottom: function () {
  //判断当前任务是否结束
  if (this.isLoading) {
   //当前任务正在进行，终止后续代码执行（禁止连续发送请求）
    return
  }
  //断开开关，当前任务正在进行
  this.isLoading = true
  //加载更多，页数增加
  this.pageNum = this.pageNum + 1
  //获取下一页数据
  loadData: function () {
   axios.get('https://me.csdn.net/weixin_45426836', {
     params: {
       pageNum: this.pageNum 
     }
 }).then(function (data) {
      console.log(data)
      this.list.push(...data)
      //当前任务结束之后打开开关（允许再次发送请求）
      this.isLoading = false
 }).catch(function (err) {
      console.log(err)
 })
  }
}