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

相关推荐
JohnYan几秒前
Bun技术评估 - 05 SQL
javascript·后端·bun
JacksonGao1 分钟前
一分钟带你了解React Fiber的工作单元结构!
前端·react.js
前端农民晨曦2 分钟前
深入浏览器事件循环与任务队列架构
前端·javascript·面试
Vhen4 分钟前
Taro Echarts封装内外环形饼图
前端
Spider_Man18 分钟前
JavaScript对象那些坑:初学者必踩的“陷阱”与进阶秘籍
前端·javascript
海螺先生39 分钟前
Cursor 高阶使用指南:AI 辅助开发的深度整合
前端
我在北京coding40 分钟前
Uncaught ReferenceError: process is not defined
前端·javascript·vue.js
Hilaku41 分钟前
我为什么觉得 React 正在逐渐失去吸引力?
前端·react.js·前端框架
用户527096487449043 分钟前
🎨 Stylelint:让你的 CSS 代码优雅如诗
前端
日升43 分钟前
AI 组件库-MateChat 组件大全与主题定制
前端·ai编程·trae