# 防抖节流 重复点击 频繁触发 本文档仅做简单的功能介绍和使用,有特殊需求或需要参考情况请自行下载查看 此处介绍不多,更多内容写到封装的文件代码注释中(方便项目使用时快速查阅) ## 传参与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() { } ```