Vue自定义指令实现防抖和节流；vue实现防抖或节流


<>防抖和节流

前端在调动接口时，常常要控制接口的请求频率，这时我们就可以使用防抖和节流两种方式来控制。

<>什么是防抖和节流，两者的区别是什么

* 防抖：
防抖就是在行为触发执行一次后，需静默等待N秒后才能再次执行，在此期间不能再触发行为，如果重复触发就计时归零后再次计时，直到用户静默到设定的阈值才再次执行。简而言之就是触发后N秒内不许触发，直到N秒后才可以执行。
* 节流： 节流就是N秒内只执行一次，不管在N秒内重复调用了多少次，也只执行一次。
<>注：以下是在VUE中以自定义指令形式实现的防抖和节流，是笔者按照自己的想法来实现的，可优化。

<>1、首先创建防抖节流JS文件
import Vue from "vue" // 防抖 Vue.directive('shake', { inserted(el, binding) {
let { fn, event = "click", delay = 800 } = binding.value; let timerA = null; el.
addEventListener( event, () => { if (timerA) { clearTimeout(timerA) timerA =
null timerA = setTimeout(() => { fn.apply(this, arguments); clearTimeout(timerA)
timerA= null }, delay); } else { fn.apply(this, arguments); timerA = setTimeout
(() => { clearTimeout(timerA) timerA = null }, delay); } }, false ); }, }); //
节流 Vue.directive('throttling', { inserted(el, binding) { let { fn, event =
"click", delay = 800 } = binding.value; let timerB = null; let flag = true el.
addEventListener(event, () => { if (flag) { flag = false fn.apply(this,
arguments); timerB = setTimeout(() => { flag = true clearTimeout(timerB); timerB
= null }, delay); } }); }, });
<>2、然后在main.js中引入
import "@/util/shakeAndThrottling.js"
<>3、使用示例
<el-button primary v-throttling="{fn:changeTestObj,event:'click',delay:2000}">加
+ 加</el-button>
注：如果有看不懂的再认真看一遍就懂了。

技术
下载桌面版
GitHub
Microsoft Store
SourceForge
Gitee
百度网盘（提取码：draw）
云服务器优惠
华为云优惠券
京东云优惠券
腾讯云优惠券
阿里云优惠券
Vultr优惠券
站点信息
问题反馈
邮箱：[email protected]
吐槽一下
QQ群：766591547
关注微信
©2020-2025 ioDraw All rights reserved, Privacy Policy