一.函数防抖与函数节流

• 概念:(作用相同-->都是限制任务触发的频率)
  • 函数防抖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)}复制代码