节流函数

概述

• 当事件触发时，函数 fn 立即执行
• 当事件触发后，等待一段时间才会再次执行函数 fn
• 当事件被频繁触发时，节流函数 throttle 表现为按一定频率执行

实现

type fnType<T> = (...args: T[]) => any

/**
 * 节流
 * @param fn 需要节流的函数
 * @param interval 时间间隔, 单位毫秒 ms, 默认 200
 * @param leading 是否立即执行, 默认立即执行
 * @returns 节流化的函数
 */
function throttle<T = any>(fn: fnType<T>, interval: number = 200, leading: boolean = false) {
    let nowTime: number
    let lastTime: number = 0

    const _throttle = function(...args: T[]) {
        nowTime = new Date().getTime()

        if (!leading && lastTime === 0) lastTime = nowTime

        if (nowTime - lastTime > interval) {
            fn.apply(this, args)
            lastTime = nowTime
        }
    }

    return _throttle
}

/**
 * 节流
 * @param {Function} fn 需要节流的函数
 * @param {number} interval 时间间隔, 单位毫秒 ms, 默认 200
 * @param {boolean} leading 是否立即执行, 默认立即执行
 * @returns 节流化的函数
 */
function throttle(fn, interval = 200, leading = false) {
    let nowTime
    let lastTime = 0

    const _throttle = function(...args) {
        nowTime = new Date().getTime()

        if (!leading && lastTime === 0) lastTime = nowTime

        if (nowTime - lastTime > interval) {
            fn.apply(this, args)
            lastTime = nowTime
        }
    }

    return _throttle
}