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

相关推荐
梦凡尘5 分钟前
Marked.js 的使用及相关问题解决
前端·js
林shir7 分钟前
3.3-Web前段开发-JavaScript(AI)
开发语言·前端·javascript
电商API&Tina11 分钟前
跨境电商高并发 API 接口接入指南(技术落地 + 高可用优化)
大数据·服务器·前端·数据库·python·json
duanyuehuan12 分钟前
vue 项目中.d.ts
前端·javascript·vue.js
阿珊和她的猫15 分钟前
Webpack 动态引入的实现原理与应用
前端·webpack·node.js
小粉粉hhh16 分钟前
记录前端菜鸟的日常——Pdf.js与双指缩放
前端·javascript·pdf
ok06020 分钟前
Chrome 小工具: 启动本地应用 (Native messaging)
前端·chrome
求梦82021 分钟前
前端基础三剑客
前端
pas13626 分钟前
27-mini-vue provide-inject
前端·javascript·vue.js
_UMR_27 分钟前
前端Vue开发环境搭建(安装Node.js)
前端·vue.js·node.js