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

相关推荐
未来之窗软件服务4 分钟前
幽冥大陆(一百12)js打造json硬件管道——东方仙盟筑基期
开发语言·javascript·算法·json·仙盟创梦ide·东方仙盟·东方仙盟算法
王家视频教程图书馆4 分钟前
vue3从本地选择一个视频 展示到视频组件中
前端·javascript·音视频
天外来鹿27 分钟前
Map/Set/WeakMap/WeakSet学习笔记
前端·javascript·笔记·学习
Luna-player36 分钟前
前端中stylus是干嘛用的
前端·css·stylus
CHQIUU1 小时前
解决 npm 全局安装 EACCES 权限问题(macOS 篇)
前端·macos·npm
程序员鱼皮1 小时前
OpenClaw接入飞书保姆级教程,几分钟搞定手机养龙虾!
前端·人工智能·后端
紫_龙1 小时前
最新版vue3+TypeScript开发入门到实战教程之vue3与vue2语法优劣对比
前端·javascript·typescript
SouthRosefinch2 小时前
一、HTML简介与开发环境
开发语言·前端·html
全栈小52 小时前
【前端】Vue 组件开发中的枚举值验证:从一个Type属性错误说起
前端·javascript·vue.js
Joker Zxc2 小时前
【前端基础(Javascript部分)】4、JavaScript的分支语句
开发语言·前端·javascript