函數節流（throttle） 函數防抖（debounce）

JS的函數防抖與節流

• 搜索框輸入文字後的聯想。當用戶頻繁的輸入應該在用戶最後一次輸入完成後進行提醒。這就是防抖(debounce)
• scroll事件有可能每秒觸發50次，但是觸發次數太多會消耗性能。讓滾動事件每秒最多執行5次，就是節流(throttle)

函數防抖

function debounce(fn, delay = 1000) {
    var timer
    return function () {
        let args = arguments
        let context = this
        clearTimeout(timer)
        timer = setTimeout(() => {
            fn.call(context, args[0].value)
        }, delay);
    }
}

函數節流

時間戳方案

function throttle(fn, delay = 1000) {
   let last = new Date()
    return function () {
        let context = this
        let args  = arguments
        if(new Date() - last >= delay) {
            fn.call(context, args[0].value)
            last = new Date()
        }
    }
}

定時器方案

function throttle2(fn, delay = 1000) {
   let timer = null
    return function () {
        let context = this
        let args  = arguments
        if(timer === null) {
            timer = setTimeout(() => {
                fn.call(context, args[0].value)
                timer = null
            }, delay);
        }
    }
}

問題

節流函數：當用戶最後一次操作在delay事件之內，但是與最後一次執行的參數不同，就會有問題。意思就是要求當用戶完成最後操作後總要執行一次。

這裏使用閉包，會不會引起內存泄漏？
閉包不會造成內存泄漏。程序寫錯了纔會造成內存泄漏。

函數節流的使用場景

• 懶加載、滾動加載、加載更多或監聽滾動條位置；
• 百度搜索框，搜索聯想功能；
• 防止高頻點擊提交，防止表單重複提交；