// 节流——高频事件触发,但在 n 秒内只会执行一次,所以节流会浓缩函数的执 行频率。
function throttle(fn, timer) { // 初始化标识为true,并应用闭包缓存起来 let flag = true return () => { if (flag) { fn(); // 执行一次事件后将标识标记为false flag = false timeout = setTimeout(_ => { // 延时肯定工夫后将标识标记为true flag = true }, timer) } } } // 防抖——触发高频事件后 n 秒后函数只会执行一次,如果 n 秒内高频事件再 次被触发,则从新计算工夫; function debounce(fn, timer) { let flag = true, timeout = null return () => { // 实现延时执行办法 let setTimeoutFn = _ => { timeout = setTimeout(_ => { fn() // 残缺执行一次延时事件后,使标记改为true flag = true }, timer) } if (flag) { flag = false // 第一次触发事件,调用延时办法 setTimeoutFn() } else { // 当用户触发事件之后间断触发时,革除掉之前的定时器,从新计时。 clearTimeout(timeout) setTimeoutFn() } } } const inputA = throttle(_ => { console.log('A') }, 1000) const inputB = debounce(_ => { console.log('B') }, 1000)