节流:
// 节流就是「技能冷却中」
const throttle = (fn, time) => {
let 冷却中 = false
return (...args) => {
if(冷却中) return
fn.call(undefined, ...args)
冷却中 = true
setTimeout(()=>{
冷却中 = false
}, time)
}
}
// 还有一个版本是在冷却结束时调用 fn
// 简洁版,删掉冷却中变量,直接使用 timer 代替
const throttle = (f, time) => {
let timer = null
return (...args) => {
if(timer) {return}
f.call(undefined, ...args)
timer = setTimeout(()=>{
timer = null
}, time)
}
}
使用方法:
const f = throttle(()=>{console.log('hi')}, 3000)
f() // 打印 hi
f() // 技能冷却中
防抖:
// 防抖就是「回城被打断」
const debounce = (fn, time) => {
let 回城计时器 = null
return (...args)=>{
if(回城计时器 !== null) {
clearTimeout(回城计时器) // 打断回城
}
// 重新回城
回城计时器 = setTimeout(()=>{
fn.call(undefined, ...args) // 回城后调用 fn
回城计时器 = null
}, time)
}
}