vue 项目自定义指令实现防抖

最新推荐文章于 2025-02-26 14:43:03 发布

转载最新推荐文章于 2025-02-26 14:43:03 发布 · 2.7k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：jianshu.com/p/c4dbbed65ba0

收录于

当前文章被以下社区和专栏收录：

本文介绍如何在Vue项目中自定义v-debounce指令，实现click事件防抖效果，提高用户体验，避免短时间内频繁触发同一事件导致的性能损耗。文章详细展示了debounce.js文件的创建与代码实现，并提供了在main.js中引入及组件中使用该指令的具体步骤。

自定义v-debounce指令实现click事件防抖

该指令绑定的方法暂不支持传递参数，如需要传参数可以参考另一篇博客，防抖组件的实现
工具uitls文件夹创建debounce.js文件
代码如下

import Vue from 'vue'

Vue.directive('debounce', {
  inserted: function (el, binding) {
    let timer;
    el.addEventListener("click", () => {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        // 关键点：vue的自定义指令传递的参数binding如果是一个函数，则通过binding.value()来执行
        binding.value();
      }, 500)
    })
  }
});

在main.js引入