// let runFlag = false;
const App = {
runFlag: false,
// eslint-disable-next-line @typescript-eslint/no-empty-function
handle: setTimeout(() => { }, 0),
/** 节流方法 */
throttle (fn: Function, wait: number) {
// 判断之前的调用是否完成
if (App.runFlag) {
return false
}
App.runFlag = true
setTimeout(() => {
fn()
App.runFlag = false
}, wait)
},
/** 防抖方法 更为严格 */
debounce (fn: any, wait: number) {
// 取消之前的延时调用
if (App.handle) {
clearTimeout(App.handle)
}
App.handle = setTimeout(() => {
fn()
}, wait)
}
}
export default App
防抖的逻辑原理
触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间
每次触发事件时都取消之前的延时调用方法,每次触发函数都会把上一次的setTimeout
清空,直到触发延迟最后一次函数就会运行一次fn()
回调方法
节流的逻辑原理
高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率
每次触发事件时都判断当前是否有等待执行的延时函数