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秒输出一次

相关推荐
Aliex_git5 分钟前
gzip 压缩实践笔记
前端·网络·笔记·学习
木昆子5 分钟前
实战A2UI:从JSON到像素——深入Lit渲染引擎
前端·人工智能
an317429 分钟前
React 页面加载埋点的正确姿势:useEffect 与 document.readyState 完美配合
前端·javascript·react.js
VXbishe14 分钟前
基于web的校园失物招领管理系统-计算机毕设 附源码 24150
javascript·vue.js·spring boot·python·node.js·php·html5
1024小神29 分钟前
vue3项目配置了子路由后刷新页面回到首页解决办法
前端·javascript·vue.js
努力学编程呀(๑•ี_เ•ี๑)1 小时前
【405】Not Allowed
java·vue.js·nginx·node.js
_Rookie._1 小时前
npm run 的原理
前端·npm·node.js
木斯佳1 小时前
前端八股文面经大全:2026-01-13MiniMax前端实习二面面经深度解析
前端·状态模式
远离UE41 小时前
Blender模型正常导入UE5 FBX 轴向匹配
前端
谭光志1 小时前
OpenClaw 安装与运行教程
前端·后端·ai编程