限制接口访问频次：防抖(debounce) 和 节流(throttle)

1、防抖debounce：强制函数在某段时间内只执行一次

const debounce = (fn, delay) => {
    let time;
 
    return () => {
        clearTimeout(time)
        time = setTimeout(() => {
            fn()
        }, delay)
    }

    // 或者

    // return function (...args) {
    //     const context = this
    //     clearTimeout(time)
    //     time = setTimeout(() => {
    //         fn.apply(context, args)
    //     }, delay)
    // }
}

debounce.leading(先执行再防抖)

debounce.trailing(先防抖再执行)

function debounce(fn, delay, immediate) {
    // immediate: true-------debounce.leading
    // immediate: false------debounce.trailing
    let time
    return function (...args) {
        const context = this
        const flag = immediate && !time
        clearTimeout(time)
        time = setTimeout(() => {
            if (!immediate) fn.apply(context, args)
        }, delay)
        if (flag) fn.apply(context, args)
    }
}

const func = debounce((data) => {
	console.log(data)
}, 1000, false)

document.querySelector('#input').addEventListener('keyup', () => {
    func(123)
})

2、节流throttle： 强制函数以固定频率执行

function throttle (fn, intervalTime = 250) {
    let latestTime
    let timer
    const now = new Date()
    return () => {
        if (latestTime && now < latestTime + intervalTime) {
            clearTimeout(timer)
            timer = setTimeout(() => {
                latestTime = now
                fn()
            }, intervalTime)
        } else {
            latestTime = now
            fn();
        }
    }
}

const func = _throttle(() => {
    console.log(new Date().toLocaleTimeString(), 111111)
}, 5000)

document.querySelector('#btn').addEventListener('click', () => {
    func()
})