防抖和節流方法實現

防抖和節流記錄

防抖簡介

1. resize和scroll等事件操作的時候，會非常頻繁的觸發導致頁面不斷的重新渲染，非常影響性能，加重瀏覽器負擔，導致用戶體驗不好，防抖函數就是當事件持續觸發事件時，debounce函數會把事件合並且不會觸發回調，當停止觸發事件delay時長的時候才會觸發事件。

 function debounce(fn, delay, immediate) {
    // fn是回調函數，delay是延遲時間，immediate是否先執行一次再節流
    var timer = null,
        _this, args
    return function() {
        //
        _this = this
        args = arguments
        // 如果有定時器先清除，讓定時器的函數不執行
        timer && clearTimeout(timer)
        if (immediate) {
            // 沒有定時器的話，告訴后面的函數可以先執行一次，首次進入函數沒有定義定時器，do為true
            var do = !timer
            // 然后在delay時間以后將timer設置為null，首次執行之后，只有在timer為null之后才會再次執行
            timer = setTimeout(function() {
                timer = null
            }, delay)
            if (do) {
                fn.apply(_this, args)
            }
        } else {
            // 如果沒設置第三個參數，就是什么時候停止，之后delay時間才執行
            timer = setTimeout(function() {
                fn.apply(_this, args)
            }, delay)
        }

    }
}

節流簡介

1. 節流也是解決類似的問題，節流只允許回調函數在規定時間內只執行一次，和防抖的最大區別是，無論多頻繁的觸發事件，都會保證在規定時間內執行一次回調

 function throttle(fn, delay) {
    var before = Date.now()
    return function() {
        var _this = this,
            args = arguments
        var now = Date.now()
        if (now - before - delay >= 0) {
            before = now
            setTimeout(function() {
                fn.apply(_this, args)
            }, delay)
        }
    }
}