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

相关推荐
豆苗学前端1 分钟前
彻底讲透浏览器缓存机制,吊打面试官
前端·javascript·面试
米丘8 分钟前
了解 window.history 和 window.location, 更好地掌握 vue-router、react-router单页面路由
前端
swipe11 分钟前
箭头函数与 this 面试题深度解析:从原理到实战
前端·javascript·面试
星_离34 分钟前
《Vue 自定义指令注册技巧:从手动到自动,效率翻倍》
前端·vue.js
狗头大军之江苏分军34 分钟前
消耗 760万 Token 后,一文看懂了“小龙虾” OpenClaw 和 OpenCode 的区别
前端·后端
毛骗导演34 分钟前
万字解析 OpenClaw 源码架构-安全与权限
前端·架构
哇哇哇哇38 分钟前
vue3 ref解析
前端
哇哇哇哇39 分钟前
vue3 reactive解析
前端
光影少年1 小时前
Vue的响应式原理?Vue2和Vue3有什么区别?
前端·vue.js·掘金·金石计划
孟祥_成都1 小时前
Cursor 要被淘汰了?开发者最应该关注的 10 个信号
前端·人工智能