封装一个完美的节流函数

函数节流：当持续触发事件时，保证一定时间段内调用一次事件处理函数。比如一个input绑定一个oninput事件，input输出内容的时候每隔1000毫秒才会执行一次。

下面我们介绍三种节流函数的封装，前俩种都有一定的弊端。

function throttle(e) {
    console.log(e.target.value)
}
inp.oninput=throttle(fn,1000)

// 第一种：当输入的时候不会立即执行
function throttle (fn ,time) {
    let timer = null
    return function() {
        if (!timer) {
            timer = setTimeout(()=>{
                fn.apply(null,arguments)
                timer = null
            },time)
        }
    }
}

// 第二种：第一次立即执行一次, 有可能最后一次事件不执行
function  throttle (fn ,time) {
    let startTime = 0
    return function() {
        let nowTime = Date.now()
        if (nowTime - startTime >=time) {
            fn.apply(null,arguments)
            startTime = now
        }
    }
}

// 第三种：结合了前俩种的写法，我认为这样封装相对完美
function throttle (fn ,time) {
    let startTime = Date.now()
    let timer = null
    return function() {
        let nowTime = Date.now()
        clearTimeout(timer)
        if (nowTime - startTime >= time){ // 时间范围允许立即执行
            fn.apply(null,arguments)
            startTime = Date.now()
        }else {
            timer = setTimeout(()=>{
                fn.apply(null,arguments)
            }, time)
        }
    }
}