发布于 

节流与防抖

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

思路:当函数被调用时,不立即执行,而是延迟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)
}
}

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

唯獨少了個字.