不知道的js——函數防抖與節流

老規矩，什麼是防抖？（節流在下面）

首先，在某些界面中有些用戶行爲會被頻繁觸發，而這些行爲往往又伴隨着DOM操作、AJAX請求等涉及頁面重繪重排這些耗費性能的處理，極可能導致界面卡頓，甚至瀏覽器奔潰，

例如：使用百度搜索學習資源時，當向輸入框輸入 搜索詞 後，纔會在搜索框推薦與你搜索詞相關的字詞。而不是你每輸入一個字就推薦一下。

函數防抖就是解決實時搜索（kepup）、拖拽(mousemove)等問題的。

下面，我們模擬一下這種情況。

//假設頁面現在有一個搜索框
<input type="text" id = "input"></input>
//當輸入時，用在控制檯打印輸入內容來模擬發送ajax的功能
var inp = document.getElementById("input");
inp.oninput = function(){
    ajax();
}
function ajax(){
    console.log(inp.value);
}

 

可以看到每輸入一個字符就會在控制檯打印出所有的內容。

 

那麼怎麼來實現防抖處理呢？

 

//重新綁定一下事件
var timer = null;//定時器
function ajaxA(e){ //實際事件被觸發以後，js引擎傳一個參數：事件對象e,我們也加進來
    console.log(e,this.value);
}
inp.oninput = function(e){
    var self = this;
    var arg = arguments;
    clearTimeout(timer);
    timer = setTimeout(function(){
    ajaxA.apply(self,arg);
    },1000);
}

 

 

 

以上就是一個簡單的防抖處理，接下來來封裝一個具有普遍性的函數debounce(handler,delay)。

function debounce(handler,delay){
    var timer = null;
    return function(){
        var self = this;
        var arg = arguments;
        clearTimeout(timer);
        timer = setTimeout(function(){
            handler.apply(self,arg);
        },delay);
    }
}

 

---

防抖👆防抖👆防抖👆

---

然後就是節流了，來一個大大的分隔符（不太美觀哦）

---

節流👇節流👇節流👇

---

 

節流就是預定的一個函數，只有在大於等於執行週期時纔會執行，週期內調用也不執行。

舉個不太恰當的例子，老譚高中時是在一個小縣城讀書，學校廁所是那種所有坑位連通的那種，自動沖水，牆上有個水龍頭一直往水箱放水，水箱內存夠了一定量的水之後（放在節流裏就是一段時間），水纔會在重力的作用下衝下，並帶走所有某物。

應用場景：窗口頁面大小的調整及滾動/瀑布流佈局/動態頁面加載 /瘋狂點擊

 

首先節流的思想：

1. 新建時間lastTime = 0
2. 獲取一下時間戳nowTime
3. 比較兩個時間的差值是否是我們所希望的等待的時間
4. 如果時間差值足夠，那麼我們執行函數
5. 如果時間差值太短不是我們希望的，那麼不執行

接着就封裝爲一個函數：

function throttle(handler,wait){
    var lastTime = 0;
    return function(e){
        var nowTime = new Date().getTime();
        if(nowTime - lastTime >= wait){
            handler.apply(this,argument);
            lastTime = nowTime;
        }
    }
}