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

相关推荐
言兴5 分钟前
秋招面试---性能优化(良子大胃袋)
前端·javascript·面试
WebInfra1 小时前
Rspack 1.5 发布:十大新特性速览
前端·javascript·github
雾恋2 小时前
我用 trae 写了一个菜谱小程序(灶搭子)
前端·javascript·uni-app
烛阴2 小时前
TypeScript 中的 `&` 运算符:从入门、踩坑到最佳实践
前端·javascript·typescript
Java 码农3 小时前
nodejs koa留言板案例开发
前端·javascript·npm·node.js
ZhuAiQuan4 小时前
[electron]开发环境驱动识别失败
前端·javascript·electron
nyf_unknown4 小时前
(vue)将dify和ragflow页面嵌入到vue3项目
前端·javascript·vue.js
胡gh4 小时前
数组开会:splice说它要动刀,map说它只想看看。
javascript·后端·面试
胡gh4 小时前
浏览器:我要用缓存!服务器:你缓存过期了!怎么把数据挽留住,这是个问题。
前端·面试·node.js
你挚爱的强哥4 小时前
SCSS上传图片占位区域样式
前端·css·scss