函数防抖和函数节流(限制接口调用频率)

一.函数防抖与函数节流

• 概念:(作用相同-->都是限制任务触发的频率)
  • 函数防抖debounce:在特定的时间内,没有触发特定条件,就执行一次任务
  • 函数节流throttle: 在特定的时间内,无论触发多次条件,仅执行一次任务
• 区别:
  • 函数防抖有可能在很长时间内一次任务都不执行,只有最后一次延时时间到达之后执行一次
  • 函数节流在特定时间内会固定触发一次任务,并且是规律的
• 应用场景:
  • 关键字搜索,限制接口调用频率(防抖)
  • 表单验证,验证邮箱的格式,停止输入时在做验证(防抖)
  • onresize onscroll onmousemove(节流) ---> 对于高频事件要做触发频率的显示

二. 防止发送请求的频率(防抖)

// 函数防抖(固定时间内没有触发条件,就执行一次任务)
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)
}
复制代码

转载于:https://juejin.im/post/5d07ae20e51d45590a445b36