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

相关推荐
JoyGqz30 分钟前
Vue 2 EOL 之后还在跑生产?这个开源安全分支已修主流 CVE,一行依赖即可接入
vue.js
zz58832 分钟前
面试官问"JS的类型"时,到底想听到什么?
javascript
gjwjuejin34 分钟前
全埋点技术方案深度剖析:从事件代理到无痕采集的完整实现
javascript
十有八七41 分钟前
AI 开发,本质是一场文档的生命周期管理
前端·人工智能
Lkstar42 分钟前
Vue 3 Composition API 进阶:自定义 Hooks 与 provide/inject 的高级玩法
vue.js·面试
Hyyy1 小时前
普通前端自救记录——第0周
前端
前端若水2 小时前
在 Vue 2 与 Vue 3 中使用 markdown-it-vue 渲染 Markdown 和数学公式
前端·javascript·vue.js
之歆2 小时前
DAY_10 JavaScript 深度解析:原型链 · 引用类型 · 内置对象 · 数组方法全攻略(下)
开发语言·前端·javascript·ecmascript
Aolith2 小时前
用 Vue 递归组件实现嵌套回复,我的评论系统升级全记录
vue.js·全栈
行星飞行2 小时前
从 cursor 、 Claude code 迁移到 codex,30 分钟快速上手 codex 常用技巧
前端