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

相关推荐
赵大仁12 分钟前
React Native 与 Expo
javascript·react native·react.js
程序员与背包客_CoderZ1 小时前
Node.js异步编程——Callback回调函数实现
前端·javascript·node.js·web
非凡ghost2 小时前
Pale Moon:速度优化的Firefox定制浏览器
前端·firefox
清灵xmf2 小时前
从 Set、Map 到 WeakSet、WeakMap 的进阶之旅
前端·javascript·set·map·weakset·weakmap
11054654012 小时前
11、参数化三维产品设计组件 - /设计与仿真组件/parametric-3d-product-design
前端·3d
爱笑的林羽3 小时前
Mac M系列 安装 jadx-gui
前端·macos
运维@小兵3 小时前
vue使用路由技术实现登录成功后跳转到首页
前端·javascript·vue.js
肠胃炎3 小时前
React构建组件
前端·javascript·react.js
邝邝邝邝丹3 小时前
React学习———React.memo、useMemo和useCallback
javascript·学习·react.js
酷爱码3 小时前
HTML5表格语法格式详解
前端·html·html5