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

相关推荐
selt79115 分钟前
Redisson之RedissonLock源码完全解析
android·java·javascript
行走的陀螺仪36 分钟前
高级前端 Input 公共组件设计方案(Vue3 + TypeScript)
前端·javascript·typescript·vue·组件设计方案
一颗不甘坠落的流星1 小时前
【Antd】基于 Upload 组件,导入Json文件并转换为Json数据
前端·javascript·json
LYFlied1 小时前
Vue2 与 Vue3 虚拟DOM更新原理深度解析
前端·javascript·vue.js·虚拟dom
Lucky_Turtle1 小时前
【Node】npm install报错npm error Cannot read properties of null (reading ‘matches‘)
前端·npm·node.js
小飞侠在吗2 小时前
vue shallowRef 与 shallowReacitive
前端·javascript·vue.js
惜分飞2 小时前
sql server 事务日志备份异常恢复案例---惜分飞
前端·数据库·php
GISer_Jing2 小时前
WebGL实例化渲染:性能提升策略
前端·javascript·webgl
Gomiko3 小时前
JavaScript进阶(四):DOM监听
开发语言·javascript·ecmascript