來,安排一下面試必考的函數節流 防抖

關於函數節流防抖的文章仍是挺多的,包括我在內的你們確定也都看了一些,emmm...我今天想以一種 更一種更語義化的理解思路分享給你們

•  前言

  咱們在平常生活中應該都幹過這樣一件事, 當咱們瀏覽網頁的時候, 電腦有時會卡住, 這時候咱們就會很      煩燥的多點幾下 (真的點不開說明得換電腦了[emoj]) 這時其實咱們已經發送請求了,頻繁的觸發事件會      形成請求資源的浪費, 這個時候就得用節流防抖來優化性能了

•  概念       

1. 函數節流:  定一個單位時間，在這個單位時間內，只能有一次觸發事件的回調函數執行，若是在同一個單位時間內某事件被觸發屢次，只有一次能生效
2. 函數防抖:  在事件被觸發n秒後再執行回調函數，若是在這n秒內又被觸發，則從新計時

•  節流

   概念看了以後, 你們內心確定會想(你特麼說了跟白說似的[捂臉]) 不要緊, 我還會語義化的講解, 先說下       節流, 在規定時間內, 觸發事件後函數會被調用, 但若是在這段時間間隔內屢次觸發事件函數也仍是隻會       被執行一次, 這一次時間間隔以後從新觸發, 纔會被再次調用(說白了就是一直在跑,只不過必定時間內只     能跑一次~)

   簡單的代碼實現:  

function throttle(fn, delay) {
    let lastTime; 
    let timer; 
    delay || (delay = 300); // 默認間隔爲300ms
    return function(arguments) {
        let context = this;
        let args = arguments;
        let nowTime = +new Date(); // 獲取系統當前的時間
        if (lastTime && nowTime < lastTime+ delay) { // 當前距離上次執行的時間小於設置的時間間隔
            clearTimeout(timer); // 清除定時器
            timer = setTimeout(function() { // delay時間後，執行函數
                lastTime= nowTime ;
                fn.apply(context, args);
            }, delay);
        } else { // 當前距離上次執行的時間大於等於設置的時間，直接執行函數
            lastTime= nowTime ;
            fn.apply(context, args);
        }
    };
}複製代碼

•  防抖
  

   屢次觸發事件後, 事件處理函數只會執行一次, 對事件處理函數進行延時操做, 若在設定的延時到來以前       再次觸發事件則清除上一次的定時器, 從新定時(這是一個小傲嬌[笑哭/],我就是要等n秒再執行, 你再按,       我再等n秒)

   簡單的代碼實現:

function ajax(content) {//模擬ajax請求
            console.log('ajax request ' + content)
        }
        function debounce(fun, delay) {
            return function (arguments) {
                //獲取函數的做用域和變量
                let that = this;
                let args = arguments;                    
                clearTimeout(fun.id)// 清除定時器
                fun.id = setTimeout(function () {
                    fun.call(that, args )
                }, delay)
            }
        }            
        let debounceAjax = debounce(ajax, 1000)
        XXX.addEventListener('keyup', function (e) {
            debounceAjax(e.target.value)
        })複製代碼

•  使用場景

1.  防抖:   搜索框輸入自動聯想匹配,  若是用戶快速的輸入了一連串的字符，假設是10個字符，那麼就   會在瞬間觸發了10次的請求，這無疑不是咱們想要的, 咱們指望的是當用戶最後輸入完成的時候觸發   事件, 函數防抖就能夠實現這樣的優化
2.  節流:   鼠標連續屢次click事件，mousemove 事件，監聽滾動事件，好比是否滑到底部自動加載更   多等等...

•  區別

1.  函數節流是間隔執行, 無論事件觸發有多頻繁，都會保證在規定時間內必定會執行一次真正的事件處理函數。  
2.  函數防抖是某一段時間內只執行一次；

   就比如乘坐電梯, 函數防抖是第一我的進去以後電梯會等3秒事後再關門, 但若是這5秒內有人按電梯, 則     電梯關門時間按這我的進來的5秒以後計算, 函數節流則比如是在乘坐另一臺電梯, 這臺電梯是第一個     人進來以後5秒後關門, 假設第二我的在第4秒進來電梯也一樣是這個點關門

   碼了這麼多字, 也是挺累的, 寫得暈乎乎的怕你們不看[捂臉], 你們相互學習, 哈哈