防抖節流

我們可能都會遇到這樣的一個問題，網頁卡了的時候，或者是閒著無聊，胡亂點選按鈕，但是這樣的結果就是這個按鈕繫結的事件函式將會根據你點選的次數不斷觸發。

這樣無疑會給效能帶來一些問題，甚至有些手速快的同hai，一分鐘能點一百多次。那我們就需要想點辦法來改進一下，防止這樣的同hai對我們的網頁產生不好的印象。

<!--首先我來定義一個按鈕，這個按鈕繫結了一個點選事件-->
<div>
<button id='btnClick'></button>
</div>

接下來我們來繫結這個事件函式

var btnItem=document.getElementById('btnClick');
var clickCount=0;
btn.addEventListener('click',function(){
    clickCount++;
})

如果一個網頁這樣寫的話，那麼使用者點選按鈕多少次就會執行多少次事件函式。我們可以改進一下

如，點了按鈕1s鍾之內，使用者將無法對按鈕進行點選，或者是點選無效

btn.addEventListener('click',()=>{
    setTimeout(()={
        console.log(clickCount++);
    },1000);
})

這樣寫的話我們就可以看到一秒鐘會列印出一個clickCount

借用一位博主的話來說，防抖就是法師放技能讀條，節流就像是我們在普通攻擊的時候，無論按多少次，都會只有設定的值觸發

函式防抖（debounce）

函式防抖就是函式觸發後一段時間無法再次進行觸發，必須超過某個等待時間否則函式不執行。

機制：

1. 事件函式不會立即執行
2. 在等待時間內觸發事件，將會重新進入等待時間
3. 使用者等待時間大於設定好的等待時間，則會再次觸發時間函式

function Debounce(handle,wait){
    let timer=null;
    return function(){
        let that=this;
        let _argument=argument;
        clearTimeout(timer);
        timer=setTimeout({
            handle.apply(that,_argument);
        },wait)
    }
}
function handle(){
    console.log('呼叫成功');
}
DOM.addEventListener('click',Debounce(handle,wait),false);

函式節流（throttle）

節流就是在一段時間內，只能觸發一次函式，如果觸發多次的話，只算作一次觸發。

我們來說下我們想利用的這個節流的機制：

1. 一個函式被執行（計時為A）
2. 另一個函式被執行（計時為B）
3. （B-A<等待時間）不執行，否則就執行

我們有兩種實現節流的方式：事件戳 和 定時器

那我們把這個封裝一下吧

//節流（時間戳版）
function throttle (handle,wait){
    let lastTime=0;
    return function(){
    var that=this;
    var nowTime=new Date().getTime();
    var _argument=argument;
        if(nowTime-lastTime>wait){
            handle.apply(that, _argument);
            lastTime=nowTime;
        }
    }
}
function handle(){
    console.log('呼叫成功');
}

//使用的時候只需要在繫結事件函式的時候使用即可
DOM.addEventListener('click',throttle(handle,wait),false) 

//節流(定時器版)
function throttle (handle,wait){
    let Timer=null;
    return function(){
    var that=this;
    var _argument=argument;
    if(!Timer){
        Timer=setTimeout({
            handle.apply(that, _argument);   
            Timer=null;
        },wait)
    }
       
    }
}
function handle(){
    console.log('呼叫成功');
}

節流和防抖區別

函式防抖是某一段時間內只執行一次，而函式節流是間隔時間執行。

應用

DeBounce:

• search搜尋聯想，使用防抖
• window觸發resize的時候，不斷的調整瀏覽器視窗大小會不斷的觸發這個事件，用防抖來讓其只觸發一次

Thtottle:

• 滑鼠不斷點選觸發，mousedown點選只觸發一次
• 監聽滑鼠滾動事件，滑倒底部載入更多