【实战】节流防抖

[sleepyShen1989]

// 防抖
// 1. 绑定this和参数
// 2. 取消
// 3. 立即执行
// 4. 获取返回值
function debounce(fn,wait, immediate = false) {
    let timer = null
    let isInvoke = false

    const _debounce = function (...args) {
        // 传入的函数具有返回值的情况，在调用的时候可以获取
        return new Promise((resolve, reject)=>{
            try {
                if(timer) clearTimeout(timer)

                let res = undefined
                if(immediate && !isInvoke) {
                    res = fn.apply(this, args)
                    resolve(res)
                    // 传入的参数仅代表是否开启立即执行，不建议同时用作是否立即执行过的flag
                    // 第一轮输入操作已经完成（过了很久之后），之后在进行输入，也应该立即执行（以下方案无法实现）
                    // immediate = false 
                    isInvoke = true
                    return
                }

                timer = setTimeout(()=>{
                    // 可以得到事件的event参数
                    res = fn.apply(this, args)
                    resolve(res)
                    timer = null
                    isInvoke = false
                }, wait)
            } catch (err) {
                reject(err)
            }
        })
    }

    // 暴露cancel方法，在请求未发出时，如果用户退出，可以手动取消请求
    _debounce.cancel = function () {
        if (timer) clearTimeout(timer)
        timer = null
        isInvoke = false
    }

    return _debounce
}