JS函數(shù)節(jié)流和函數(shù)防抖

doodlewind 發(fā)布于2019-08-23 13:48 / 1297人閱讀

摘要：為什么需要函數(shù)防抖和函數(shù)節(jié)流在瀏覽器中某些計(jì)算和處理要比其他的昂貴很多。函數(shù)防抖如果一個(gè)事件被頻繁觸發(fā)多次，并且觸發(fā)的時(shí)間間隔過(guò)短，則防抖函數(shù)可以使得對(duì)應(yīng)的事件處理函數(shù)只執(zhí)行最后觸發(fā)的一次。函數(shù)防抖可以把多個(gè)順序的調(diào)用合并成一次。

1.為什么需要函數(shù)防抖和函數(shù)節(jié)流？

在瀏覽器中某些計(jì)算和處理要比其他的昂貴很多。例如DOM操作比起非DOM交互需要更多的內(nèi)存和CPU占用時(shí)間。連續(xù)嘗試進(jìn)行過(guò)多的DOM操作可能會(huì)導(dǎo)致瀏覽器掛起，甚至崩潰；
例如當(dāng)調(diào)整瀏覽器大小的時(shí)候，resize事件會(huì)連續(xù)觸發(fā)；如果在resize事件處理程序內(nèi)部嘗試進(jìn)行DOM操作，其高頻率的更改可能會(huì)讓瀏覽器崩潰；
為了繞開上面的問(wèn)題，需要對(duì)該類函數(shù)進(jìn)行節(jié)流；

2.什么是函數(shù)防抖和函數(shù)節(jié)流

防抖（debounce）和節(jié)流（throttle）都是用來(lái)控制某個(gè)函數(shù)在一定時(shí)間內(nèi)執(zhí)行多少次的技巧，兩者相似而又不同。
背后的基本思想是某些代碼不可以在沒(méi)有間斷的情況下連續(xù)重復(fù)執(zhí)行。

2.1 函數(shù)防抖 (debounce)

如果一個(gè)事件被頻繁觸發(fā)多次，并且觸發(fā)的時(shí)間間隔過(guò)短，則防抖函數(shù)可以使得對(duì)應(yīng)的事件處理函數(shù)只執(zhí)行最后觸發(fā)的一次。
 函數(shù)防抖可以把多個(gè)順序的調(diào)用合并成一次。

2.2 函數(shù)節(jié)流 (throttle)

如果一個(gè)事件被頻繁觸發(fā)多次，節(jié)流函數(shù)可以按照固定頻率去執(zhí)行對(duì)應(yīng)的事件處理方法。
函數(shù)節(jié)流保證一個(gè)事件一定時(shí)間內(nèi)只執(zhí)行一次。

3.應(yīng)用場(chǎng)景

類型	場(chǎng)景
函數(shù)防抖	1. 手機(jī)號(hào)、郵箱輸入檢測(cè) 2. 搜索框搜索輸入（只需最后一次輸入完后，再放松Ajax請(qǐng)求） 3. 窗口大小resize（只需窗口調(diào)整完成后，計(jì)算窗口大小，防止重復(fù)渲染） 4. 滾動(dòng)事件scroll（只需執(zhí)行觸發(fā)的最后一次滾動(dòng)事件的處理程序） 5. 文本輸入的驗(yàn)證（連續(xù)輸入文字后發(fā)送 AJAX 請(qǐng)求進(jìn)行驗(yàn)證，（停止輸入后）驗(yàn)證一次就好）
函數(shù)節(jié)流	1. DOM元素的拖拽功能實(shí)現(xiàn)（mousemove） 2. 射擊游戲的 mousedown/keydown 事件（單位時(shí)間只能發(fā)射一顆子彈） 3. 計(jì)算鼠標(biāo)移動(dòng)的距離（mousemove） 4. 搜索聯(lián)想（keyup） 5. 滾動(dòng)事件scroll，（只要頁(yè)面滾動(dòng)就會(huì)間隔一段時(shí)間判斷一次）

類型

場(chǎng)景

函數(shù)防抖

1. 手機(jī)號(hào)、郵箱輸入檢測(cè)
2. 搜索框搜索輸入（只需最后一次輸入完后，再放松Ajax請(qǐng)求）
3. 窗口大小resize（只需窗口調(diào)整完成后，計(jì)算窗口大小，防止重復(fù)渲染）
4. 滾動(dòng)事件scroll（只需執(zhí)行觸發(fā)的最后一次滾動(dòng)事件的處理程序）
5. 文本輸入的驗(yàn)證（連續(xù)輸入文字后發(fā)送 AJAX 請(qǐng)求進(jìn)行驗(yàn)證，（停止輸入后）驗(yàn)證一次就好）

函數(shù)節(jié)流

1. DOM元素的拖拽功能實(shí)現(xiàn)（mousemove）
2. 射擊游戲的 mousedown/keydown 事件（單位時(shí)間只能發(fā)射一顆子彈）
3. 計(jì)算鼠標(biāo)移動(dòng)的距離（mousemove）
4. 搜索聯(lián)想（keyup）
5. 滾動(dòng)事件scroll，（只要頁(yè)面滾動(dòng)就會(huì)間隔一段時(shí)間判斷一次）

4.如何實(shí)現(xiàn) 4.1 函數(shù)防抖實(shí)現(xiàn)

function debounce(fn, delay, scope) {
    let timer = null;
    // 返回函數(shù)對(duì)debounce作用域形成閉包
    return function () {
        // setTimeout()中用到函數(shù)環(huán)境總是window,故需要當(dāng)前環(huán)境的副本；
        let context = scope || this, args = arguments;
        // 如果事件被觸發(fā)，清除timer并重新開始計(jì)時(shí)
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context, args);
        }, delay);
    }
}


代碼解讀

第一次調(diào)用函數(shù)，創(chuàng)建一個(gè)定時(shí)器，在指定的時(shí)間間隔之后運(yùn)行代碼；
當(dāng)?shù)诙握{(diào)用該函數(shù)時(shí)，它會(huì)清除前一次的定時(shí)器并設(shè)置另一個(gè)；
如果前一個(gè)定時(shí)器已經(jīng)執(zhí)行過(guò)了，這個(gè)操作就沒(méi)有任何意義；
然而，如果前一個(gè)定時(shí)器尚未執(zhí)行，其實(shí)就是將其替換為一個(gè)新的定時(shí)器；
目的是只有在執(zhí)行函數(shù)的請(qǐng)求停止了delay時(shí)間之后才執(zhí)行。

4.2 函數(shù)節(jié)流實(shí)現(xiàn) 4.2.1 利用時(shí)間戳簡(jiǎn)單實(shí)現(xiàn)

function throttle(fn, threshold, scope) {
    let timer;
    let prev = Date.now();
    return function () {
        let context = scope || this, args = arguments;
        let now = Date.now();
        if (now - prev > threshold) {
            prev = now;
            fn.apply(context, args);
        }
    }
}

4.2.2 利用定時(shí)器簡(jiǎn)單實(shí)現(xiàn)

function throttle2(fn, threshold, scope) {
    let timer;
    return function () {
        let context = scope || this, args = arguments;
        if (!timer) {
            timer = setTimeout(function () {
                fn.apply(context, args);
                timer = null;
            }, threshold);
        }
    }
}

5 舉例（scroll事件） CSS代碼

    .wrap {
       width: 200px;
        height: 330px;
        margin: 50px;
        margin-top: 200px;
        position: relative;
        float: left;
        background-color: yellow;
    }
    .header{
        width: 100%;
        height: 30px;
        background-color: #a8d4f4;
        text-align: center;
        line-height: 30px;
    }
    .container {
        background-color: pink;
        box-sizing: content-box;
        width: 200px;
        height: 300px;
        overflow: scroll;
        position: relative;
    }
    .content {
        width: 140px;
        height: 800px;
        margin: auto;
        background-color: #14ffb2;
    }

HTML代碼

    
        滾動(dòng)事件：普通
        
            
        
    
    
        滾動(dòng)事件:加了函數(shù)防抖
        
            
        
    
    
        滾動(dòng)事件:加了函數(shù)節(jié)流

JS代碼

    let els = document.getElementsByClassName("container");
    let count1 = 0,count2 = 0,count3 = 0;
    const THRESHOLD = 200;

    els[0].addEventListener("scroll", function handle() {
        console.log("普通滾動(dòng)事件！count1=", ++count1);
    });
    els[1].addEventListener("scroll", debounce(function handle() {
        console.log("執(zhí)行滾動(dòng)事件!（函數(shù)防抖） count2=", ++count2);
    }, THRESHOLD));
    els[2].addEventListener("scroll", throttle(function handle() {
        console.log(Date.now(),", 執(zhí)行滾動(dòng)事件!（函數(shù)節(jié)流） count3=", ++count3);
    }, THRESHOLD));

// 函數(shù)防抖
function debounce(fn, delay, scope) {
    let timer = null;
    let count = 1;
    return function () {
        let context = scope || this,
            args = arguments;
        clearTimeout(timer);
        console.log(Date.now(), ", 觸發(fā)第", count++, "次滾動(dòng)事件！");
        timer = setTimeout(function () {
            fn.apply(context, args);
            console.log(Date.now(), ", 可見(jiàn)只有當(dāng)高頻事件停止，最后一次事件觸發(fā)的超時(shí)調(diào)用才能在delay時(shí)間后執(zhí)行!");
        }, delay);
    }
}

// 函數(shù)節(jié)流
function throttle(fn, threshold, scope) {
    let timer;
    let prev = Date.now();
    return function () {
        let context = scope || this, args = arguments;
        let now = Date.now();
        if (now - prev > threshold) {
            prev = now;
            fn.apply(context, args);
        }
    }
}

效果截圖

6.總結(jié)


debounce和throttle均是通過(guò)減少高頻觸發(fā)事件的實(shí)際事件處理程序的執(zhí)行來(lái)提高事件處理函數(shù)運(yùn)行性能的手段，并沒(méi)有實(shí)質(zhì)上減少事件的觸發(fā)次數(shù)。

debounce可以把多個(gè)順序的調(diào)用合并成一次。
throttle保證一個(gè)事件一定時(shí)間內(nèi)只執(zhí)行一次。