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

相关推荐
嗷o嗷o1 分钟前
Android 前台服务为什么越来越难用了?很多问题不是限制多,而是你任务模型就不该用 FGS
前端
摇滚侠8 分钟前
软件开发外包项目组,如何提高代码质量和开发效率
java·开发语言·前端·ide·intellij-idea
不考研当牛马18 分钟前
HTML CSS 新手大全初学者必看 (含有部分 JavaScript)
javascript·css·html
卷帘依旧19 分钟前
Promise链式调用原理
前端·javascript
光影少年20 分钟前
react 单向数据流理解
前端·react.js·掘金·金石计划
万少31 分钟前
可以免费使用的 DeepSeek-V4-Flash,很多人还不知道!
前端
threelab1 小时前
Three.js 图像粒子飞线效果 | 三维可视化 / AI 提示词
开发语言·javascript·人工智能
anyup1 小时前
全面重构的 uni-app 多平台上传组件,功能强到离谱!
前端·vue.js·uni-app
小赵同学WoW1 小时前
作用域链与闭包
前端
暗不需求1 小时前
告别“class 命名地狱”:从面向对象 CSS 到原子 CSS(Tailwind) 的思维跃迁
前端·css·react.js