vue自定义防抖指令

main.js中

复制代码
Vue.directive('throttle', {
  bind: (el, binding) => {
    let throttleTime = binding.value; // 防抖时间
    if (!throttleTime) { // 用户若不设置防抖时间,则默认2s
      throttleTime = 2000;
    }
    let cbFun;
    el.addEventListener('click', event => {
      if (!cbFun) { // 第一次执行
        cbFun = setTimeout(() => {
          cbFun = null;
        }, throttleTime);
      } else {
        event && event.stopImmediatePropagation();
      }
    }, true);
  },
});

使用

复制代码
	<div  @click="sayhello" v-throttle>提交</div>

实现效果,控制台2秒输出一次

相关推荐
扬帆破浪7 分钟前
sidecar崩溃后前端怎么续命 重启策略与状态保留
前端·人工智能·架构·开源·知识图谱
光影少年13 分钟前
前端算法题
前端·javascript·算法
Lee川15 分钟前
从输入框到智能匹配:一文读懂搜索功能的完整实现
前端·后端
朝阳391 小时前
React【面试】
前端·react.js·面试
漓漾li1 小时前
每日面试题(2026-05-15)- 前端
前端·vue.js·react.js
进击切图仔1 小时前
RAG 加载 pdf 文档
linux·前端·pdf
小小小小宇1 小时前
git 大仓库拉取卡顿问题
前端
前端那点事1 小时前
告别低级冗余!10个前端原生高阶技巧,让代码更优雅、性能更出众
前端·vue.js
hexu_blog1 小时前
前端vue后端java如何实现证件照功能
前端·javascript·vue.js
豹哥学前端1 小时前
前端 LocalStorage 实战:从入门到熟练,一篇就够了
前端·javascript·面试