Vue进阶 | 在vue中如何进行防抖

朝着全栈加速前进

2022-06-28 198 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第28天，点击查看活动详情

前端中防抖是一个非常常见的场景，但在项目中使用Vue框架开发时，原生的调用方法便不再适用。并且还要注意this指向发生变化的问题

回顾一下防抖： 当用户触发某个事件的操作过于频繁，只执行最后一次对事件的操作

要实现的场景： 在模糊搜索时，避免频繁调用接口

预期效果：

看起来很容易实现的功能，但是实际操作的时候会发现其中的很多问题，原生的调用方法便不再适用，一不小心就会踩坑，下面一一列举

当防抖函数声明在单独的文件中，在具体页面中导入并且调用是不需要写this的。
```
export function debounce(func, wait, immediate) {...}
```
页面引入：
```
import debounce from '@/utils'

change () { 
    debounce(doSomething,500,true)
}
```
但是，这样的写法是不生效的。于是进行改造，如下写法可以生效：

（注：如果需要在传入的函数中使用 this，传入函数的形式不能写成箭头函数，要使用function，否则取不到）
```
 methods: {
  change: debounce(function() {  // 这里是function而非箭头函数
    // doSomething
  }, 500)
}
```
上面这种形式的弊端是，当有数据需要通过接口传递时，或者调用的函数是组件内的函数，无法获得this。

原因：
- debounce 中执行的代码是由防抖函数中的 function 调用的，调用的时候如果没有绑定 this，doSomething 这部分就不能用 this 访问 Vue 实例
- 并且，当防抖函数debounce写在具体的页面，而不是以引入的形式声明时，上述的形式无法使用，change: this.debounce()是错误的写法。

2. 最终形式：

除此之外，在vue中可以引入lodash直接调用防抖节流方法，操作方式与上述相同。

总结

debounce的回调使用时，注意this的指向发生变化
debounce 函数需要手动执行