发布于 

节流与防抖

防抖:抖：高频率的发送请求

思路：当函数被调用时，不立即执行，而是延迟10秒执行。

如果在这10秒内再次调用了这个函数，则从当前被调用的时间开始计算

1
2
3
4
5
6
7
8
9
10
11
12
hSearch () {
 if (this.timer) {
    cleraTimeout(this.timer)
 } 
  this.timer = setTimeout(async () => {
     if (!this.keyword) {
      return
}
   const result = await getSearchSuggestions(this.keyword)
this.searchSuggestions = result.data.data.options
}, 0.3 * 1000)
}

节流：低频率发送请求

思路：如果这个函数距离上一次被调用的时间之间相隔不到10秒，则本次调用，不执行代码

两次有效调用时间，并且至少相隔10秒

1
2
3
4
5
6
7
8
9
10
11
12
13
hSearch () {
// 只有this.timer是null，才会开启下一个定时器
 if (!this.timer) {
// 只要setTimeout一执行，this.timer就有值了
   this.timer = setTimeout(async () => {
      this.timer = null
      if (!this.keyword) {
         return
}
  const result = await getSearchSuggestions(this.word)
}, 0.3 * 1000)
}
}
许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

快来参与讨论吧

本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。