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

相关推荐
星恒随风35 分钟前
四天学完前端基础三件套(JavaScript篇)
开发语言·前端·javascript·笔记
guslegend44 分钟前
第9节:前端工程与一键启动
前端·大模型·状态模式·ai编程
杜子不疼.1 小时前
【 C++ AI 大模型接入 SDK】 - 日志模块
开发语言·javascript·c++
南囝coding1 小时前
Anthropic 内部数百个 Claude Code Skills,他们总结的这套方法值得看
前端·后端
Dxy12393102162 小时前
如何使用jQuery获取一类元素并遍历它们
前端·javascript·jquery
csdn小瓯2 小时前
AI质量评估体系:LLM-as-a-Judge实现与自动化测试实战
前端·网络·人工智能
jiayong232 小时前
第 43 课:任务详情抽屉里的批量处理闭环与删除联动
java·开发语言·前端
likerhood2 小时前
Java 访问修饰符:public、protected、private讲解
java·开发语言·javascript
刀法如飞2 小时前
JavaScript 数组去重的 20 种实现方式,学会用不同思路解决问题
前端·javascript·算法
小江的记录本2 小时前
【AI大模型选型指南】《2026年5月(最新版)国内外主流AI大模型选型指南》(个人版)
前端·人工智能·后端·ai·aigc·ai编程·ai写作