防抖函数在Vue中的应用
这里先贴出代码// func是用户传入需要防抖的函数// wait是等待时间const debounce = (func, wait = 50) => {// 缓存一个定时器idlet timer = 0// 这里返回的函数是每次用户实际调用的防抖函数// 如果已经设定过定时器了就清空上一次的定时器// 开始一个新的定时器,延迟执行用户传入的方法re...
·
这里先贴出代码
// func是用户传入需要防抖的函数
// wait是等待时间
const debounce = (func, wait = 50) => {
// 缓存一个定时器id
let timer = 0
// 这里返回的函数是每次用户实际调用的防抖函数
// 如果已经设定过定时器了就清空上一次的定时器
// 开始一个新的定时器,延迟执行用户传入的方法
return function(...args) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
func.apply(this, args)
}, wait)
}
}
说明:这个节流函数也是我在网上找的,但是我直接调用执行是不起作用的,原因是有些代码有错误,还有就是要修改某些参数的和this的指向。
下面是我修改之后的代码
debounce1(func, wait = 500) {
// 这个定时器一定不能是这个函数私有的,一定是要放在Data中,如果
// 没有放在data中则会出现点击几次就触发几次,虽然说点击后确实会延迟执行,但是没有起到节流应该有的效果
// let timer = this.timer
// debugger
// 这里返回的函数是每次用户实际调用的防抖函数
// 如果已经设定过定时器了就清空上一次的定时器
// 开始一个新的定时器,延迟执行用户传入的方法
// 这里的this一定要保存副本!!!!!!
var _this = this
return function(...args) {
if (_this.timer) clearTimeout(_this.timer)
// console.log('77')
_this.timer = setTimeout(() => {
func.apply(_this, args)
}, wait)
}
},
对修改之后的代码说明:
- 我把timer设置在data中,这样就可以保存这个变量的值,我已经试过了,如果没有放到data中会出现点击多少次按钮就执行多少次的情况,虽然执行的时候会实现延迟执行的效果
- this的指向, 在return函数中,需要修改this的执行,这里我用_this保存了this(Vue的实例),然后我用里面的timer我并没有用变量存放其他,因为存放起来的话就起不到‘共有’这个作用了,而且代码会执行不了
- 在调用之后,记得要在末尾加上(),不然就根本没调用return回来的函数,所以函数不会被执行
更多推荐
已为社区贡献1条内容
所有评论(0)