[[435872]]

性能一直是前端老生常談的一個話題，其中有一個性能問題就是我們會頻繁的觸發(fā)一些事件，例如mousemove、scroll、resize等，雖然瀏覽器已經(jīng)對這些事件的觸發(fā)做了一些優(yōu)化，但是如果在很短的時間內(nèi)頻繁的觸發(fā)仍然會影響性能，這個時候就需要今天的主角：防抖和節(jié)流，利用它們來進行優(yōu)化，提高性能。

1 防抖

1.1 定義

防抖就是將多次高頻操作優(yōu)化為只在最后一次執(zhí)行(某個函數(shù)在某段時間內(nèi)，無論觸發(fā)了多少次回調(diào)，都只執(zhí)行最后一次)。通常的使用場景是：用戶輸入，只需在輸入完成后做一次輸入校驗即可。

1.2 實現(xiàn)

防抖是將多次操作合并為一次操作完成，其原理就是維護一個計時器，在規(guī)定的時間后觸發(fā)函數(shù)，但是在該規(guī)定時間內(nèi)再次觸發(fā)的話就會取消之前的定時器而重新設置，從而保證了只有最后一次操作能夠被觸發(fā)。其實現(xiàn)步驟如下所示：

1. 利用閉包保存一個timer變量，然后返回一個函數(shù)(這個返回的函數(shù)就是后續(xù)頻繁觸發(fā)操作中調(diào)用的函數(shù));
2. 根據(jù)標志位判斷是否第一次需要立即執(zhí)行(因為有些情況是需要首次調(diào)用函數(shù)立即執(zhí)行的，若沒有該參數(shù)，就會在定時器到了之后才會執(zhí)行);
3. 當有新的觸發(fā)時，若存在定時器，則清空該定時器;
4. 設定一個新的定時器，重新計時。

function debounce(fn, wait, immediate) { 
        let timer = null; 
        return function (...args) { 
            // 立即執(zhí)行的功能（timer為空表示首次觸發(fā)） 
            if (immediate && !timer) { 
                fn.apply(this, args); 
            } 
 
            // 有新的觸發(fā)，則把定時器清空 
            timer && clearTimeout(timer); 
            // 重新計時 
            timer = setTimeout(() => { 
                fn.apply(this, args); 
            }, wait); 
        } 
    } 

1.3 效果預覽

觀察效果圖可以驗證上述的理論知識：

1. 防抖之后輸出內(nèi)容的頻次降低了;
2. 防抖之后，其在超過一定時間之后才會輸出內(nèi)容。

2 節(jié)流

2.1 定義

節(jié)流就是每隔一段時間后執(zhí)行一次，也就是降低頻率，將高頻操作優(yōu)化成低頻操作。通常使用場景：滾動條事件、resize事件、動畫等，通常每隔100-500ms執(zhí)行一次即可。

2.2 實現(xiàn)

節(jié)流函數(shù)的實現(xiàn)方式有兩種：定時器版本、時間戳版本，這兩者各有千秋，下面來簡要實現(xiàn)一下。

2.2.1 定時器版本

定時器版本的節(jié)流函數(shù)其重點是利用閉包保存timer變量，具有兩個特點：

1. n秒后才會執(zhí)行第一次(定時器到了時間后才會觸發(fā));
2. 停止觸發(fā)后節(jié)流函數(shù)還會執(zhí)行一次(因為該函數(shù)是延遲執(zhí)行的，當停止觸發(fā)時其任務已經(jīng)到了隊列中，所以停止后還會執(zhí)行一次)。

// 定時器版本 
function throttle(fn, wait) { 
    let timer = null; 
    return function(...args) { 
        if (!timer) { 
            timer = setTimeout(() => { 
                fn.apply(this, args); 
                timer = null; 
            }, wait) 
        } 
    } 
} 

2.2.2 時間戳版本

時間戳版本的節(jié)流函數(shù)重點是利用閉包保存上一次的時間previous，具有兩個特點：

開始觸發(fā)后會立即執(zhí)行(因為previous開始會被賦值為0);

停止觸發(fā)后不再執(zhí)行(因為該函數(shù)是同步任務，在觸發(fā)的時候就會進行相應的判斷，所以就不存在停止觸發(fā)后再執(zhí)行的情況)。

// 時間戳版本 
function throttle(fn, wait) { 
    // 上一次執(zhí)行時間 
    let previous = 0; 
    return function(...args) { 
        // 當前時間 
        let now = +new Date(); 
        if (now - previous > wait) { 
            previous = now; 
            fn.apply(this, args); 
        } 
    } 
} 

2.3 效果預覽

觀察效果圖可以驗證上述的理論知識：

1. 節(jié)流確實降低了內(nèi)容的輸出頻率，將高頻變?yōu)榈皖l;
2. 時間戳版本的節(jié)流函數(shù)在首次會輸出內(nèi)容，但是最后一次的內(nèi)容不會輸出(謹慎使用);
3. 定時器版本的節(jié)流函數(shù)確實不會立刻打印內(nèi)容，而是超過一定時間之后才會打印;此外，其最后輸入的內(nèi)容會被打印出來。