86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
// 使用方法：
|
||
// import { Throttle, Debounced } from "./lee_debounced_throttle"
|
||
// let a: Function = new Debounced().useFn(handleLogin, 3000) // New一个防抖对象
|
||
// let b: Function = new Throttle().useFn(handleLogin, 3000) // New一个节流对象
|
||
// function leeBouce() {
|
||
// a()
|
||
// b()
|
||
// }
|
||
|
||
|
||
|
||
/**
|
||
* 防抖类
|
||
*/
|
||
class Debounced {
|
||
/**
|
||
* 防抖函数
|
||
* 1、N秒内的多次触发仅执行最后一次
|
||
* 2、在不断的触发事件时以最后一次触发为*标准*准进行调用执行
|
||
* 3、判断连续触发事件的标准为(N秒内触发则重新计算时间直至取最后一次)
|
||
* @param fn 需要防抖处理的回调函数
|
||
* @param delay 防抖处理的延迟标准时间
|
||
* @param immediate 是否默认 立即执行(去除延迟时间影响)
|
||
*/
|
||
public useFn(fn: Function, delay: number = 1000, immediate: boolean = false): Function {
|
||
let timer: NodeJS.Timeout | undefined
|
||
return (...args: any) => {
|
||
if (immediate) {
|
||
console.log("立即执行参数 执行一次方法")
|
||
fn.apply(this, args)
|
||
immediate = false
|
||
return
|
||
}
|
||
if (timer) {
|
||
console.log("当前正在重复点击，准备重置时间，重新计算后等待N秒触发最后一次事件执行")
|
||
clearTimeout(timer)
|
||
}
|
||
timer = setTimeout(() => {
|
||
console.log("进入类启用定时器防抖执行了一次方法咯！！！")
|
||
clearTimeout(timer)
|
||
fn.apply(this, args)
|
||
}, delay)
|
||
}
|
||
}
|
||
}
|
||
/**
|
||
* 节流类
|
||
*/
|
||
class Throttle {
|
||
/**
|
||
* 节流函数
|
||
* N秒内仅执行第一次
|
||
* @param fn 需要节流处理的回调函数
|
||
* @param delay 节流处理的延迟标准时间
|
||
* @param immediate 是否默认 立即执行(去除延迟时间影响)
|
||
*/
|
||
public useFn(fn: Function, delay: number = 1000, immediate: boolean = false): Function {
|
||
console.log("进入节流对象")
|
||
let timer: NodeJS.Timeout | undefined
|
||
let status: boolean = false // 是否为重复点击状态
|
||
return (...args: any) => {
|
||
if (immediate) {
|
||
console.log("立即执行参数 执行一次方法")
|
||
fn.apply(this, args)
|
||
immediate = false
|
||
return
|
||
}
|
||
if (status) {
|
||
console.log("当前点击状态为正在重复点击，请稍等片刻后在点击执行")
|
||
return
|
||
}
|
||
console.log("执行节流：当前执行了一次点击方法")
|
||
fn.apply(this, args)
|
||
status = true // 修改状态
|
||
timer = setTimeout(() => {
|
||
console.log("规定时间到,重置状态，可以重新调用")
|
||
status = false
|
||
}, delay)
|
||
}
|
||
}
|
||
}
|
||
|
||
export {
|
||
Debounced,
|
||
Throttle
|
||
} |