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

相关推荐
Z***25805 分钟前
JavaScript虚拟现实案例
开发语言·javascript·vr
90后小陈老师9 分钟前
用户管理系统 07 项目前端初始化 | 新手实战 | 期末实训 | Java+SpringBoot+Vue
java·前端·spring boot
小溪彼岸14 分钟前
一键切换Cluade、Codex供应商配置,CC Switch你值得一试
前端
2501_9160088919 分钟前
API接口调试全攻略 Fiddler抓包工具、HTTPS配置与代理设置实战指南
前端·ios·小程序·https·fiddler·uni-app·webview
Coder-coco21 分钟前
点餐|智能点餐系统|基于java+ Springboot的动端的点餐系统小程序(源码+数据库+文档)
java·vue.js·spring boot·小程序·论文·毕设·电子点餐系统
Halo_tjn23 分钟前
Set集合专项实验
java·开发语言·前端·python
m0_5649149226 分钟前
EDGE浏览器如何在新标签页打开收藏?EDGE浏览器如何打开书签不覆盖原网页?如何默认在新建标签页打开收藏夹书签?
前端·edge
司铭鸿40 分钟前
图论中的协同寻径:如何找到最小带权子图实现双源共达?
linux·前端·数据结构·数据库·算法·图论
风宇啸天1 小时前
令牌桶按用户维度限流
前端
safestar20121 小时前
React 19 深度解析:从并发模式到数据获取的架构革命
前端·javascript·react.js