©2020-2024 ioDraw All rights reserved,
Privacy Policy
在vue中实现防抖函数是非常简单的事情，但是往往我们生成的防抖函数可能需要使用到组件内的this上下文（
vue3的setup不存在这个问题，该篇文章只谈vue2
），那么这个时候可能就需要灵活的变通一下了，这篇文章只是介绍我遇到这个问题时候的思路哈，各位大佬如有更好的方法，欢迎给小弟在评论区介绍一下哈~
首先还是来说一下在vue中不需要考虑this上下文的防抖函数生成方法：
在项目中声明一个防抖函数生成方法:
export function debounceFromVue (fn: Function, time: number, args: any[]) { let
timeout: any = null; return function() { if (timeout) { clearTimeout(timeout);
} timeout = setTimeout(() => { fn.apply(this, [...args, ...arguments]); }, time)
; }; }
然后在vue组件内的methods中定义即可使用：
import debounceFromVue from '@/'utils/util' methods: { handleClick:
debounceFromVue(() => { // do somethings... }, 1000) }
这样的做法一般可以解决大部分问题，但是如果我们需要传入的fn函数是组件内的函数呢？这时候就需要用this上下文去拿到methods中的其他方法，比如需要在debounceFromVue中传入一个组件内的getData函数，这时候组件实例在methods中是获取不到的，如下：
methods: { // 报错，这里是取不到组件this实例的 handleClick: debounceFromVue(this.getData,
1000), getData: async function() { const { data } = await requestData(); console
.log(data) } }
所以这时候需要稍微改变一下debounceFromVue内部的实现了。废话不多说，直接上代码：
export function debounceFromVue (fnName: string, time: number, args: any[]) {
let timeout: any = null; return function() { if (timeout) { clearTimeout(timeout
); } timeout = setTimeout(() => { this[fnName].apply(this, [...args, ...
arguments]); }, time); }; }
这是我自己的一个思路，就是直接将组件内函数名传入到debounceFromVue中，利用闭包生成的函数会被挂载到vue组件实例上这一特性，将this上下文继承到debounceFromVue所生成的函数中，从而实现对组件内函数进行调用的方法。这样就解决了获取不到组件this实例的尴尬问题。最后，还是推荐大家使用Vue官方文档上也提供了对应的方法，直接引入Lodash的debounce方法，然后在组件created生命周期中注册也是可以完美实现的：