js實現防抖函數和節流函數

防抖函數(debounce)

1. 含義：防抖函數指的是在特定的時間內沒有再次觸發，才得以進行接下來的函數運行；
2. 用途：當window.onresize不斷的調整大小的時候，爲了不不斷的重排與重繪，能夠用防抖函數設置在onresize完成後一段時間內再也不有窗口大小變更，此時再進行dom的重排重繪；

function debounce(fun,delay){
        var timer = null;
        return function(){
            if(timer !=== null){
                clearTimeout(timer);
            };
            timer = setTimeout(fun,delay);
        }
    };
    
    function handler(){
        console.log('hello')
    };
    
    window.onresize = function(){
        debounce(handler,1000);
    };

節流函數(throttle)

1. 含義：在函數被調用成功後，短期內不會被再次觸發；
2. 用途：當點擊表單按鈕的時候，可以有效的避免高頻次的提交操做；

function throttle(fun.delay){
        var flag = false;
        return function(){
            var _this = this;
            var args = arguments;
            if(flag){
                return;
            }else{
                flag = true;
                setTimeout(function(){
                    fun.apply(_this,args);
                    flag = false;
                },delay);
            }
        }
    };

    function handler(){
        console.log('world');
    };

    window.addEventListener('scroll',throttle(handler,1000));

總結：

• 相同防抖和節流函數均可以有效的減小短期內觸發同一函數的頻次；
• 不一樣的是 ==以百度首頁的輸入框自動提示搜索關聯詞功能爲例==：
  • 防抖函數會肯定在你輸入完成後的必定時間（delay）去請求接口數據；
  • 節流函數會在你整個輸入過程期間內，沒過必定時間（delay）請求一次接口數據；