什么是防抖？什么是节流？

防抖是什么？

概念：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

思路：每次触发事件的时候，清除定时器，然后从新设置新的定时器。

防抖的应用场景

• 输入框search搜索联想，用户在不断输入值时触发input事件，用防抖来节约请求资
• window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

代码实现

// 防抖就是「回城被打断」
const debounce = (fn, time) => {
    let 回城计时器 = null
    return (...args)=>{
    if(回城计时器 !== null) {
    clearTimeout(回城计时器) // 打断回城
    }
// 重新回城
    回城计时器 = setTimeout(()=>{
    fn.call(undefined, ...args) // 回城后调用 fn
    回城计时器 = null
    }, time)
	}
}

什么是节流？

**概念：**高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

简要思路：每此触发事件时判断是否定时器已满，满则重新定时，否则不做任何事。

应用场景：

• 鼠标不断点击触发，click/mousedown(单位时间内只触发一次)
• 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

代码实现

// 节流就是「技能冷却中」
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() // 技能冷却中