【VUE】在vue中实现防抖函数（解决Vue 2.x组件内this上下文问题）

在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生命周期中注册也是可以完美实现的：