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

相关推荐
luckyzlb3 小时前
03-node.js & webpack
前端·webpack·node.js
一 乐3 小时前
远程在线诊疗|在线诊疗|基于java和小程序的在线诊疗系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·小程序
左耳咚3 小时前
如何解析 zip 文件
前端·javascript·面试
程序员小寒3 小时前
前端高频面试题之Vue(初、中级篇)
前端·javascript·vue.js
陈辛chenxin3 小时前
软件测试大赛Web测试赛道工程化ai提示词大全
前端·可用性测试·测试覆盖率
沿着路走到底3 小时前
python 判断与循环
java·前端·python
Code知行合壹3 小时前
AJAX和Promise
前端·ajax
大菠萝学姐4 小时前
基于springboot的旅游攻略网站设计与实现
前端·javascript·vue.js·spring boot·后端·spring·旅游
心随雨下4 小时前
TypeScript中extends与implements的区别
前端·javascript·typescript
摇滚侠4 小时前
Vue 项目实战《尚医通》,底部组件拆分与静态搭建,笔记05
前端·vue.js·笔记·vue