【每日面试题】手写防抖函数和节流函数

📅 2021 / 03 / 28

防抖函数

在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。

const debounce = (fn, delay = 1000) => {
    let timer = null;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, args)
        }, delay)
    }
}

适用场景

• 按钮提交场景：防止多次提交按钮，只执行最后提交的一次。
• 服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索联想词功能类似。

节流函数

规定在一个单位时间内，只触发一次函数。如果这个单位事件内触发多次函数，只有一次生效。

const throttle = (fn, delay = 1000) => {
    let timer = null;
  
    return (...args) => {
        if (timer) return
        timer = setTimeout(() => {
            timer = null;
            fn.apply(this, args);
        }, delay)
    }
}

适用场景

• 拖拽场景：固定事件内只执行一次，防止超高频触发位置变动。
• 缩放场景：监控浏览器调整大小。
• 动画场景：避免短时间内多次触发动画引起性能问题。