Vue无法正常使用防抖
- 在vue使用防抖会遇到一些this指向上的问题。
- 主要是Vue对于methods的方法调用的时候使用call魔改了this的指向了Vue的实例
- 就会造成防抖的失效
示例代码
- 可以理解为用户点击调用了 tj方法 里面对methods里面的db方法进行了防抖debounce包裹使用
- 结果没有实现防抖效果
防抖代码
第一种解决
把 let timer = null 放置在debounce外面 但是有两个缺点
- 每次产生新的闭包 很容易造成内存泄露
- 造成过多的全局变量
如何观测内存泄露
- 一般来说都是js闭包写太多没有被及时回收或者监视器没有被移除造成的内存泄露
- 我们可以通过chorme来进行观察
- 当发现这里内存或者监视器一直增多的时候
- 就要检查自己的代码有没有及时清除监视器或者那些地方闭包泄露了
第二种比较好的方式
tj: debounce(function() {
this.db()
}, 200)
原理解析
- 为什么这样写可以
- 因为tj是一个对象methods上的一个属性而不是一个方法tj()
- 每次在调用tj这个属性的时候指向的都是同一个tj
- tj属性上面挂载的debounce函数都指向同一个
- 闭包不会重复创建始终只有一个
