【js知识】函数防抖和函数节流——限制接口调用频率

限制接口调用频率（函数防抖和函数节流）

• 防止发送请求的频率（防抖）
  • 在固定的时间内，没有触发特定的条件，就执行一次任务

// 函数防抖（固定时间内没有触发条件，就执行一次）
async inputHandle () {
  clearTimeout(this.timer)
  this.timer = setTimeout(async () => {
    let res = await request('goods/qsearch', 'get', {
      query: this.keyword
    })
    this.searchResult = res.data.message
  }, 1000)
}

• 防止发送请求的频率（节流）
  • 在固定时间内，无论触发多少次条件，仅仅执行一次任务

// 函数节流（固定时间内无论触发几次，仅执行一次）
keywordSearch () {
  if (this.isLoading) {
    // 终止后续代码的执行，终止请求
    return
  }
  this.isLoading = true
  setTimeout(async () => {
    let res = await request('goods/qsearch', 'get', {
      query: this.keyword
    })
    this.searchResult = res.data.message
    // 重新打开发送请求的开关
    this.isLoading = false
  }, 1000)
}

• 函数防抖与函数节流

  • 概念（作用相同：限制任务触发的频率）

    • 函数防抖debounce：在特定的时间内，没有触发特定条件，就执行一次任务
    • 函数节流throttle：在特定的时间内，无论触发多次条件，仅执行一次任务

  • 两者的区别：

    • 函数防抖有可能在很长时间内一次任务都不执行，只有最后一次延时时间达到之后执行一次
    • 函数节流在特定时间内会固定触发一次任务，并且是规律的

  • 应用场景

    函数防抖：

    • 关键字搜索，限制接口调用频率
    • 表单验证，验证邮箱的格式，停止输入时再做验证

    函数节流：

    • onresize（页面放大/缩小）、 onscroll（滚动页面）、 onmousemove（鼠标移动），（一般用于分页加载数据）
      • 对于高频事件一般要做触发频率的显示