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

相关推荐
Ashley_Amanda15 小时前
JavaScript 中数组的常用处理方法
开发语言·javascript·网络
BD_Marathon16 小时前
Router_路由的基本使用
javascript
float_六七16 小时前
行级与块级元素:核心区别与应用场景
开发语言·前端·javascript
毕设十刻16 小时前
基于Vue的家教预约系统7fisz(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
前端无涯16 小时前
深度解析:fetch 与 Promise 结合实战及面试重点
前端·javascript
风舞红枫16 小时前
node代理vue打包后的文件,实现本地测试
前端·javascript·vue.js·node.js
helloCat16 小时前
记录CI/CD自动化上传AppGallery遇到的坑
android·前端·api
Yanni4Night16 小时前
使用URLPattern API构建自己的路由器 🛣️
前端·javascript
web守墓人16 小时前
【前端】garn:使用go实现一款类似yarn的依赖管理器
前端
全栈陈序员16 小时前
Vue 实例挂载的过程是怎样的?
前端·javascript·vue.js·学习·前端框架