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

相关推荐
Highcharts.js几秒前
React 应用中的图表选择:Highcharts vs Apache ECharts 深度对比
前端·javascript·react.js·echarts·highcharts·可视化图表·企业级图表
腹黑天蝎座几秒前
如何实现自定义的虚拟列表
前端·react.js
用户350144817925 分钟前
继承和原型链:js如何实现继承
前端
Bernard02156 分钟前
给普通人的 AI 黑话翻译手册:一文看懂 LLM、RAG、Agent 到底是什么
前端·后端
恋猫de小郭6 分钟前
JetBrains Amper 0.10 ,期待它未来替代 Gradle
android·前端·flutter
胖纳特8 分钟前
Seafile 文件预览增强方案:集成 BaseMetas Fileview 突破格式限制
前端·后端
小贵子的博客8 分钟前
Ant Design Vue中 table组件设置分组表头和固定总结栏
vue.js·anti-design-vue
梵得儿SHI10 分钟前
Vue 3 工程化实践:多页面路由配置 + Pinia 状态管理完全指南
前端·javascript·vue.js·vuerouter4·pinia状态管理的·模块化store设计·路由与状态管理
lxh011311 分钟前
电话号码的字母组合
java·javascript·算法