防抖和節流方法實現

防抖和節流記錄

防抖簡介

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)
        }
    }
}