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

相关推荐
拜托啦!狮子几秒前
安装EnsDb.Hsapiens.v86
java·服务器·前端
金玉满堂@bj6 分钟前
playwright使用教程总结
前端
scheduleTTe28 分钟前
Nginx
服务器·前端·nginx
techdashen37 分钟前
不开端口,不配 DNS,用树莓派在家搭一个公网可访问的 Web 服务
前端·网络·智能路由器
早起傻一天~G1 小时前
vue2+element-UI表单封装
前端·vue.js·ui
pixcarp1 小时前
Nginx实战部署与踩坑总结 附带详细配置教程
服务器·前端·后端·nginx·golang
Live&&learn1 小时前
Vue项目打包后内联字符串不显示的原因
前端·javascript·vue.js
爱上好庆祝1 小时前
学习js的第三天
前端·css·人工智能·学习·计算机外设·js
aq55356001 小时前
Chrome如何重塑Web标准的未来格局
前端·chrome
宁雨桥1 小时前
深入剖析Vue2与Vue3响应式原理:从Object.defineProperty到Proxy的演进
前端·vue.js