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

相关推荐
明月看潮生2 分钟前
青少年编程与数学 02-005 移动Web编程基础 06课题、响应式设计
前端·青少年编程·编程与数学·移动web
明月看潮生2 分钟前
青少年编程与数学 02-005 移动Web编程基础 07课题、多媒体形式
前端·青少年编程·移动开发·编程与数学·移动web
べJL8 分钟前
SVG怎么画渐变甜甜圈(进度环)
前端·css
初遇你时动了情8 分钟前
css3滚动边框特效属性 filter、inset应用
前端·css·css3
残花月伴29 分钟前
axios
javascript
Ares码农人生33 分钟前
React 前端框架简介
前端·react.js·前端框架
小汤猿人类34 分钟前
nacos-gateway动态路由
java·前端·gateway
GISer_Jing34 分钟前
前端经典面试合集(二)——Vue/React/Node/工程化工具/计算机网络
前端·vue.js·react.js·node.js
van叶~1 小时前
仓颉语言实战——2.名字、作用域、变量、修饰符
android·java·javascript·仓颉
GesLuck1 小时前
C#控件开发4—仪表盘
前端·经验分享·c#