一.函数防抖与函数节流
- 概念:(作用相同-->都是限制任务触发的频率)
- 函数防抖
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