防抖/节流函数

防抖函数

防抖函数的能力是将一个事件处理函数转换为一个新的事件处理函数，该新函数会在事件触发后等待一段时间，如果在这段时间内事件再次触发，那么就会重新开始等待。只有当事件触发的时间间隔超过了指定的时间，才会执行事件处理函数。

代码展示

// 当事件触发时，会清除之前的定时器，重新设置一个定时器。只有当事件触发的时间间隔超过了指定的时间，才会执行事件处理函数。
const debounce = (fn, delay) => {
    let timer = null
    return (...args) => {
        if (timer)
            clearTimeout(timer)
        timer = setTimeout(() => {
            fn(...args)
        }, delay)
    }
}

节流函数

节流函数的能力是将一个事件处理函数转换为一个新的事件处理函数，该新函数会在事件触发后等待一段时间，如果在这段时间内事件再次触发，那么就会忽略该事件。只有当事件触发的时间间隔超过了指定的时间，才会执行事件处理函数。

代码展示

// 当事件触发时，会检查是否有定时器正在运行。如果没有，就会设置一个定时器，等待指定的时间后执行事件处理函数。如果有，就会忽略该事件。只有当事件触发的时间间隔超过了指定的时间，才会执行事件处理函数。
const throttle = (fn, delay) => {
    let lastTime = 0
    return (...args) => {
        let now = Date.now()
        if (now - lastTime >= delay) {
            fn(...args)
            lastTime = now
        }
    }
}