51 lines
1.7 KiB
Markdown
51 lines
1.7 KiB
Markdown
# 防抖节流 重复点击 频繁触发
|
||
|
||
本文档仅做简单的功能介绍和使用，有特殊需求或需要参考情况请自行下载查看
|
||
此处介绍不多，更多内容写到封装的文件代码注释中(方便项目使用时快速查阅)
|
||
|
||
## 传参与this对象全都提前预置了，看需要是否保留
|
||
## 对于需求不满足可自行在此基础上改造扩展,也可把更好的代码留在评论区供大家学习参考
|
||
## 个人理解(函数适用场景)
|
||
|
||
防抖：N秒内的多次触发仅执行最后一次
|
||
节流：N秒内仅执行第一次
|
||
|
||
防抖场景：频繁触发事件如：change，缩减事件的触发频率
|
||
节流场景：按钮多次点击如：click，避免重复点击造成的接口的重复调用
|
||
|
||
## js方式的使用方法
|
||
```js
|
||
// 方法引入
|
||
import {
|
||
debounced,
|
||
throttle
|
||
} from "../../common/防抖节流/leejs_debounced_throttle.js"
|
||
// 方法调用
|
||
methods: {
|
||
// 使用方法debounced,throttle
|
||
leeBtnClick: throttle(function(pageParam) {
|
||
console.log(this.title, pageParam)
|
||
console.log("执行需要触发事件得函数方法")
|
||
}, 3000),
|
||
leeBtnClickD: debounced(function(pageParam) {
|
||
console.log(this.title, pageParam)
|
||
console.log("执行需要触发事件得函数方法")
|
||
}, 3000),
|
||
}
|
||
```
|
||
## ts方式的使用方法
|
||
```ts
|
||
// 方法引入
|
||
import { Throttle, Debounced } from "../../common/防抖节流/leets_debounced_throttle"
|
||
|
||
let deb : Function = new Debounced().useFn(testFun, 3000) // New一个防抖对象
|
||
let thr : Function = new Throttle().useFn(testFun, 3000) // New一个节流对象
|
||
|
||
function leeBtnClick(val) {
|
||
console.log(val)
|
||
val === 11 ? deb() : thr()
|
||
}
|
||
function testFun() {
|
||
|
||
}
|
||
``` |