vue自定义指令之防抖函数

在项目中会遭遇到用户连续点击多次按钮的情况，

这个时候就需要使用防抖函数，在一定时间内只触发一次函数执行。

实现

在 Vue 项目中，在 src > utils 目录下新建 Debounce.js

Debounce.js

/*** 一个简单的函数防抖* @param {Function} fun 需要限制执行频率的函数* @param {Number} delay 延迟时间，这段时间过后，才可触发第二次*/
export default function (fun, delay) {// 记录上一次函数触发的时间var timer = null;var debounced = function () {var ctx = this;var args = arguments;// 清除上一次延时器if (timer) clearTimeout(timer);timer = setTimeout(function () {fun.apply(ctx, args);}, delay);};return debounced;
}

注意，fun直接调用方法里面的this会指向window
而fun.apply()的第一个参数可以指定这个方法里的 this是谁

main.js 主要代码

/*** 防抖 防止重复点击* 传参：v-debounceClick="() =>{handleFun(arg)}"* 不传参:v-debounceClick="handleFun"* delayTime:延迟的时间,只执行最后一次*/
Vue.directive('debounceClick', {bind(el, binding, vnode, oldvnode) {},inserted: function (el, binding) {let delayTime = el.getAttribute('delay-time') || 1500el.onclick = Debounce(function () {binding.value()}, delayTime)},
})

调用

<el-button v-debounceClick="debounce">防抖</el-button>

debounce() {console.log(111);}

vue自定义指令之防抖函数相关推荐

vue自定义指令封装节流_Vue自定义指令封装节流函数的方法示例
节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在<JavaScript高级程序设计>一书中有这样的一个例子 ...
clientsideevents能定义几个click事件_分享8个非常实用的Vue自定义指令
作者:lzg9527 https://juejin.cn/post/6906028995133833230 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也 ...
如何写一个Vue自定义指令
Vue除了核心功能默认内置的指令 ,Vue 也允许注册自定义指令. 自定义指令是用来操作DOM的.尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动.自定义指令就是一种有效的补充和扩展,不 ...
Vue的自定义指令以及Vue自定义指令的应用场景
前言一.Vue的自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令.有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令. 自定义指令分为全局自定义指令和局部的自 ...
vue自定义指令使用
前言一.Vue的自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令.有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令. 自定义指令分为全局自定义指令和局部的自 ...
vue 自定义指令（directive）实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
pyqt5 treeview鼠标右键菜单事件_【动手实践】使用 Vue 自定义指令实现右键菜单...
本文来自于神奇的程序员前言浏览器里右键时会有一个默认的菜单,在我的开源项目中正好有自定义右键菜单的需求,在npm库找了下与之相关的包,发现都是以组件形式实现的,感觉那种做法太过繁琐. 于是,我就 ...
9、Vue自定义指令
Vue自定义指令 1.vue指令和自定义指令 2.使用自定义指令 2.1.全局注册 2.2.局部注册 3.钩子函数 1.vue指令和自定义指令什么是指令? v-model.v-bind.v-on.v ...
vue 自定义指令 directives
原文链接: vue 自定义指令 directives 上一篇: vue 事件修饰符 stop,capture,prevent 下一篇: js 坑... vue 可以自己扩充指令增加一个v-color ...

vue自定义指令之防抖函数

实现

调用

vue自定义指令之防抖函数相关推荐

最新文章

热门文章