Debounce,又称防抖动函数, 常被被用来控制 前端异步请求及其它高耗任务的频率。
概念比较抽象,了解一个业务场景,就很容易理解了。
比如通过搜索过滤一个列表,通过“@change=“search”监听输入向后台发起请求,如果每输入一个字母就调用一次”search“向后台发送一次请求,效率将会很低,如果可以将调用search函数控制在一定时间内,比如1秒内,在这一秒钟,我输入了5个字母,search函数被调用了5次,但是只向后台发送一次请求,是不是效率就会提升很多,不需要频繁调接口。
methods: {
search () {
console.log("此处向后台发起请求")
}
},
而debounce函数就是解决这个问题的,顾名思义,debounce是“去抖动”的意思,结合以上的业务场景就很形象,一段时间内输入值的变化都是“抖动”,不是要真正向后台发请求的真正“动作”,为了让后台不被骚扰,我把这些“抖动”的小动作都屏蔽掉。
然而,在学习使用debounce函数的过程中,我踩了好几个坑,分享出来以供借鉴。
我使用的是lodash自带的debounce函数,官方文档这样描述的
_.debounce(func, [wait=0], [options={}])
两个必选参数中,第一个是防抖动的函数,第二个是防抖动的时间毫秒数。很像“setTimeout”函数的写法。
于是我将代码写成:
// 错误示例
methods: {
search () {
this._.debounce(() => {
console.log('此处向后台发起请求:' + this.searchText)
}, 1000)
}
}
控制台既没有报错,也没有打印出任何东西,后来经同事提醒,发现debounce函数的返回值是一个function,跟setTimeout使用是不一样的
Returns
(Function): Returns the new debounced function.
于是,我将代码改为,在debounce后面加了个(),让这个返回的函数立即执行
// 错误示例
methods: {
search () {
this._.debounce(() => {
console.log('此处向后台发起请求:' + this.searchText)
}, 1000)()
}
},
这次,控制台终于打出了我想要的结果,但是。。。但是,并没有起到防抖动的作用,我在一秒钟按几次键盘,就打印出多少条数据,只是会有1秒的延迟,更想象中的效果不一样。
后台看了Vue的官方实例,修改代码为,得到了我想要的效果,即以一秒钟为单位,控制台输入input里的值,多余的被判定为“抖动”的输入,不会在控制台打印。
// 正确示例
// 加载到vue原型链上的lodash在method函数后的定义的地方取不到,重新引了一遍
import _ from 'lodash'
export default {
methods: {
// 加载到原型链上的lodash,在getRemote后取不到
// 注意,这里debounce中的第一个参数,不能写成箭头函数,否则,取不到this
getRemote: _.debounce(function () {
console.log('此处向后台发起请求:', this.searchText)
}, 1000),
search () {
this.getRemote()
}
}
}
得到想要的结果,但是还是留了三个疑问:
1.为什么在main.js中引入Vue原型链上的lodash在getRemote后不能用?
2.为什么getRemote的debounce第一个参数写成箭头函数就取不到this?
3.最后一个正确示例和倒数第一个错误示例的写法,原理上的区别是什么?
作者:lovelytong
链接:https://www.jianshu.com/p/d5de1c077105
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。