Vue中自定义防抖函数

浮灬夸

已于 2022-05-19 00:53:51 修改

阅读量321

点赞数

分类专栏：原创成长文章标签： vue.js 前端 javascript

于 2022-05-19 00:53:06 首次发布

本文链接：https://blog.csdn.net/kyrieoh/article/details/124854505

版权

原创同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

成长

9 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中自定义一个防抖函数，并在用户输入场景下应用。通过创建一个工具类包，定义debounce函数，解决了频繁触发导致的性能问题。在Vue组件的方法中，使用debounce包裹业务逻辑，确保输入事件在停顿2秒后才执行，有效优化了用户体验。注意使用时避免箭头函数以保持正确的上下文，并利用call方法确保this指向正确。

摘要由CSDN通过智能技术生成

在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)
 }