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

or0fun 發(fā)布于2019-08-23 14:28 / 1580人閱讀

摘要：函數(shù)節(jié)流指定時(shí)間間隔內(nèi)只會(huì)執(zhí)行一次任務(wù)函數(shù)防抖任務(wù)頻繁觸發(fā)的情況下，只有任務(wù)觸發(fā)的間隔超過(guò)指定間隔的時(shí)候，任務(wù)才會(huì)執(zhí)行。使用函數(shù)節(jié)流與函數(shù)防抖的目的，在開(kāi)頭的栗子中應(yīng)該也能看得出來(lái)，就是為了節(jié)約計(jì)算機(jī)資源。

什么是函數(shù)節(jié)流與函數(shù)防抖

舉個(gè)栗子，我們知道目前的一種說(shuō)法是當(dāng) 1 秒內(nèi)連續(xù)播放 24 張以上的圖片時(shí)，在人眼的視覺(jué)中就會(huì)形成一個(gè)連貫的動(dòng)畫(huà)，所以在電影的播放（以前是，現(xiàn)在不知道）中基本是以每秒 24 張的速度播放的，為什么不 100 張或更多是因?yàn)?24 張就可以滿足人類(lèi)視覺(jué)需求的時(shí)候，100 張就會(huì)顯得很浪費(fèi)資源。再舉個(gè)栗子，假設(shè)電梯一次只能載一人的話，10 個(gè)人要上樓的話電梯就得走 10 次，是一種浪費(fèi)資源的行為；而實(shí)際生活正顯然不是這樣的，當(dāng)電梯里有人準(zhǔn)備上樓的時(shí)候如果外面又有人按電梯的話，電梯會(huì)再次打開(kāi)直到滿載位置，從電梯的角度來(lái)說(shuō)，這時(shí)一種節(jié)約資源的行為（相對(duì)于一次只能載一個(gè)人）。

函數(shù)節(jié)流: 指定時(shí)間間隔內(nèi)只會(huì)執(zhí)行一次任務(wù)；

函數(shù)防抖: 任務(wù)頻繁觸發(fā)的情況下，只有任務(wù)觸發(fā)的間隔超過(guò)指定間隔的時(shí)候，任務(wù)才會(huì)執(zhí)行。

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

這里以判斷頁(yè)面是否滾動(dòng)到底部為例，普通的做法就是監(jiān)聽(tīng) window 對(duì)象的 scroll 事件，然后再函數(shù)體中寫(xiě)入判斷是否滾動(dòng)到底部的邏輯：

function onScroll() {
    // 判斷是否滾動(dòng)到底部的邏輯
    const pageHeight = $("body").height();
    const scrollTop = $(window).scrollTop();
    const winHeight = $(window).height();
    const thresold = pageHeight - scrollTop - winHeight;

    if (thresold > -100 && thresold <= 20) {
        console.log("end");
    }
}

$(window).on("scroll", onScroll);

這樣做的一個(gè)缺點(diǎn)就是比較消耗性能，因?yàn)楫?dāng)在滾動(dòng)的時(shí)候，瀏覽器會(huì)無(wú)時(shí)不刻地在計(jì)算判斷是否滾動(dòng)到底部的邏輯，而在實(shí)際的場(chǎng)景中是不需要這么做的，在實(shí)際場(chǎng)景中可能是這樣的：在滾動(dòng)過(guò)程中，每隔一段時(shí)間在去計(jì)算這個(gè)判斷邏輯。而函數(shù)節(jié)流所做的工作就是每隔一段時(shí)間去執(zhí)行一次原本需要無(wú)時(shí)不刻地在執(zhí)行的函數(shù)，所以在滾動(dòng)事件中引入函數(shù)的節(jié)流是一個(gè)非常好的實(shí)踐：

$(window).on("scroll", throttle(onScroll));

加上函數(shù)節(jié)流之后，當(dāng)頁(yè)面再滾動(dòng)的時(shí)候，每隔 300ms 才會(huì)去執(zhí)行一次判斷邏輯。

簡(jiǎn)單來(lái)說(shuō)，函數(shù)的節(jié)流就是通過(guò)閉包保存一個(gè)標(biāo)記（canRun = true），在函數(shù)的開(kāi)頭判斷這個(gè)標(biāo)記是否為 true，如果為 true 的話就繼續(xù)執(zhí)行函數(shù)，否則則 return 掉，判斷完標(biāo)記后立即把這個(gè)標(biāo)記設(shè)為 false，然后把外部傳入的函數(shù)的執(zhí)行包在一個(gè) setTimeout 中，最后在 setTimeout 執(zhí)行完畢后再把標(biāo)記設(shè)置為 true（這里很關(guān)鍵），表示可以執(zhí)行下一次的循環(huán)了。當(dāng) setTimeout 還未執(zhí)行的時(shí)候，canRun 這個(gè)標(biāo)記始終為 false，在開(kāi)頭的判斷中被 return 掉。

function throttle(fn, interval = 300) {
    let canRun = true;
    return function () {
        if (!canRun) return;
        canRun = false;
        setTimeout(() => {
            fn.apply(this, arguments);
            canRun = true;
        }, interval);
    };
}

函數(shù)防抖(debounce)

這里以用戶注冊(cè)時(shí)驗(yàn)證用戶名是否被占用為例，如今很多網(wǎng)站為了提高用戶體驗(yàn)，不會(huì)再輸入框失去焦點(diǎn)的時(shí)候再去判斷用戶名是否被占用，而是在輸入的時(shí)候就在判斷這個(gè)用戶名是否已被注冊(cè)：

$("input.user-name").on("input", function () {
    $.ajax({
        url: `https://just.com/check`,
        method: "post",
        data: {
            username: $(this).val(),
        },
        success(data) {
            if (data.isRegistered) {
                $(".tips").text("該用戶名已被注冊(cè)！");
            } else {
                $(".tips").text("恭喜！該用戶名還未被注冊(cè)！");
            }
        },
        error(error) {
            console.log(error);
        },
    });
});

很明顯，這樣的做法不好的是當(dāng)用戶輸入第一個(gè)字符的時(shí)候，就開(kāi)始請(qǐng)求判斷了，不僅對(duì)服務(wù)器的壓力增大了，對(duì)用戶體驗(yàn)也未必比原來(lái)的好。而理想的做法應(yīng)該是這樣的，當(dāng)用戶輸入第一個(gè)字符后的一段時(shí)間內(nèi)如果還有字符輸入的話，那就暫時(shí)不去請(qǐng)求判斷用戶名是否被占用。在這里引入函數(shù)防抖就能很好地解決這個(gè)問(wèn)題：

$("input.user-name").on("input", debounce(function () {
    $.ajax({
        url: `https://just.com/check`,
        method: "post",
        data: {
            username: $(this).val(),
        },
        success(data) {
            if (data.isRegistered) {
                $(".tips").text("該用戶名已被注冊(cè)！");
            } else {
                $(".tips").text("恭喜！該用戶名還未被注冊(cè)！");
            }
        },
        error(error) {
            console.log(error);
        },
    });
}));

其實(shí)函數(shù)防抖的原理也非常地簡(jiǎn)單，通過(guò)閉包保存一個(gè)標(biāo)記來(lái)保存 setTimeout 返回的值，每當(dāng)用戶輸入的時(shí)候把前一個(gè) setTimeout clear 掉，然后又創(chuàng)建一個(gè)新的 setTimeout，這樣就能保證輸入字符后的 interval 間隔內(nèi)如果還有字符輸入的話，就不會(huì)執(zhí)行 fn 函數(shù)了。

function debounce(fn, interval = 300) {
    let timeout = null;
    return function () {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, interval);
    };
}

總結(jié)

其實(shí)函數(shù)節(jié)流與函數(shù)防抖的原理非常簡(jiǎn)單，巧妙地使用 setTimeout 來(lái)存放待執(zhí)行的函數(shù)，這樣可以很方便的利用 clearTimeout 在合適的時(shí)機(jī)來(lái)清除待執(zhí)行的函數(shù)。

使用函數(shù)節(jié)流與函數(shù)防抖的目的，在開(kāi)頭的栗子中應(yīng)該也能看得出來(lái)，就是為了節(jié)約計(jì)算機(jī)資源。