前言
当点击秒杀按钮的时候，使用防抖，如果一直点击，接口是否能发出去？？还是最后一次点击时会发出。
使用防抖函数来处理点击事件，可以确保在短时间内多次点击只有最后一次生效。如果一直点击按钮，在防抖函数设定的延迟时间内，只有最后一次点击会触发接口的请求，前面的点击事件将被忽略。
因此，只有最后一次点击的接口能够发出去，前面的点击事件不会触发接口请求。
防抖和节流的区别：
防抖（Debounce-规定时间结束后执行）
：当事件连续触发时，只有在固定的延迟时间（如300ms）内没有再次触发事件，才会执行事件处理函数。如果在延迟时间内再次触发事件，则重新开始计时。
节流（Throttle-规定时间内执行一次）：
当事件连续触发时，在固定的时间间隔（如300ms）内，只会执行一次事件处理函数。即使在时间间隔内多次触发事件，也只会执行一次，而不会重复执行。
总结
- 防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout
- 节流：控制流量，单位时间内事件只能触发一次。代码实现重在开锁关锁 timer=timeout; timer=null
export class Lodash { // 存储防抖节流的函数，用于检测清除 private debounceTimeout: NodeJS.Timeout | null private throttleTimeout: NodeJS.Timeout | null private runTime:number // eslint-disable-next-line @typescript-eslint/no-useless-constructor constructor() { this.debounceTimeout = null this.throttleTimeout = null this.runTime = 0 } // 防抖-可以被覆盖，简单点说，在单位时间内，永远执行最后一次防抖函数 public debounce(fc: (...args: any[]) => void, delay: number = 1000) { if (this.debounceTimeout) clearTimeout(this.debounceTimeout) return (...args:any[]) => { this.debounceTimeout = setTimeout(() => { fc(...args) }, delay) } } // 节流函数-单位时间结束后内只执行一次， // 延迟节流 — 单位时间结束后执行， // 立即执行 -立刻执行节流函数， 需等时间结束，方可执行下一次 public throttleAweit(fc:(...args:any[])=>void,delay:number = 1000){ // 立即执行的节流函数 // 1、当前时间 需要大于上次节流执行的事件，方可执行 // 当前时间 const nowTime = new Date().getTime() return (...args:any[])=>{ if(nowTime - this.runTime > delay){ fc(...args) this.runTime = new Date().getTime() } } } public throttleAsync(fc:(...args:any[])=>void,delay:number = 1000){ // 延迟节流 if(this.throttleTimeout){ return ()=>{} } return (...args:any[])=>{ this.throttleTimeout = setTimeout(()=>{ fc(...args) this.throttleTimeout = null },delay) } } }
