Vue中自定义防抖函数

在Vue中为用户输入自定义防抖函数

1.在src目录下定义一个工具类包

// 自定义防抖的函数
export const debounce = (fun, deely) => {
    let timer = '';
    return function () {
        if(timer) clearTimeout(timer);
        timer = setTimeout(() => {
            fun.call(this,...arguments)
        }, deely);
    };
};

2.在Vue文件中进行使用

 <input @input="goodNumberHandler(carInfo)" />

 methods: {
     goodNumberHandler: debounce(async function(carInfo){
     	 //  编写自己的逻辑
         await this.$store.dispatch('xxxxxxx', {
             skuId: carInfo.Id,
             skuNumber: carInfo.skuNum
         });
     }, 2000)
 }

注意的问题点

1. debounce参数即函数的写法不能使用箭头函数 注意this指向问题
2. 封装的debounce函数 fun的调用需要通过call、aplly改变this指向
3. debounce是利用到了闭包的特性