函數節流與函數防抖（以及它們的使用場景）

概念

• 函數節流: 頻繁觸發,但只在特定的時間內才執行一次代碼
• 函數防抖: 頻繁觸發,但只在特定的時間內沒有觸發執行條件才執行一次代碼

兩者區別在於函數節流是固定時間做某一件事，比如每隔1秒發一次請求。而函數防抖是在頻繁觸發後，只執行一次（兩者的前提都是頻繁觸發）

函數節流

函數節流的應用場景一般是onrize，onscroll等這些頻繁觸發的函數，比如你想獲取滾動條的位置，然後執行下一步動作

window.onscroll = function(){
    console.log("要執行的事");
}

如果監聽後執行的是Dom操作，這樣的頻繁觸發執行，可能會影響到瀏覽器性能，甚至會將瀏覽器卡崩。
所以我們可以規定他多少秒執行一次，這種方法叫函數節流

// 限制500ms執行一次
var type = false;
window.onscroll = function(){
    if(type === true) return;
    type = true;
    setTimeout(()=>{
        console.log("要執行的事");
        type = false;
    },500)
}
 

另一種類似方法

// 限制500ms執行一次
var time = null;
window.onscroll = function(){
    let curTime = newDate();
    if(time==null){
       time = curTime; 
    }
    if((curTime-time)>500){
        console.log("要執行的事");
    }
}

函數防抖

函數防抖的應用場景：輸入框搜索自動補全事件，頻繁操作點贊和取消點贊等等
這些應用場景，也可以通過函數節流來實現，但是相對於函數防抖來說過於復雜，畢竟專業的事專人幹

實例場景：頻繁操作點贊和取消點贊，因此需要獲取最後一次操作結果並發送給服務器

使用函數防抖的辦法

var timer = null;
function click(){
    clearTimeout(timer);
    timer = setTimeout(()=>{
        ajax(...);
    },500)
}

實現原理：如果在500ms內頻繁操作點贊或者取消點贊，則每次都會清除一次定時器然後重新創建一個。直到最後一次操作點贊或者取消點贊，然後等待500ms後發送ajax

使用函數節流結合函數防抖的辦法

如果想要每隔一段時間發送一次請求，而不是等到客戶觸發最後一次操作才發送請求，可以這樣實現

var startTime = null;
var timer = null;
function click(){
    let curTime = new Date();
    startTime = startTime == null?curTime:startTime;
    if((curTime - startTime)>1000){
        // 固定上一次操作離這一次操作間隔>1000ms，則發送一次。
        //這裏常用於階段性頻繁操作
        startTime = curTime; // 為下一次函數觸發做準備
        ajax(...);
    }else{
        // 否則則執行函數防抖
        clearTimeout(timer);
        timer = setTimeout(()=>{
                    ajax(xxx);
                },500);
    }
}

原文地址：http://www.manongjc.com/article/63262.html

函數的防抖與節流