前言

1、防抖(debounce)：觸發(fā)高頻事件后 n 秒內(nèi)函數(shù)只會執(zhí)行一次，如果 n 秒內(nèi)高頻事件再次被觸發(fā)，則重新計(jì)算時(shí)間

舉例：就好像在百度搜索時(shí)，每次輸入之后都有聯(lián)想詞彈出，這個(gè)控制聯(lián)想詞的方法就不可能是輸入框內(nèi)容一改變就觸發(fā)的，他一定是當(dāng)你結(jié)束輸入一段時(shí)間之后才會觸發(fā)。

節(jié)流(thorttle)：高頻事件觸發(fā)，但在 n 秒內(nèi)只會執(zhí)行一次，所以節(jié)流會稀釋函數(shù)的執(zhí)行頻率

舉例：預(yù)定一個(gè)函數(shù)只有在大于等于執(zhí)行周期時(shí)才執(zhí)行，周期內(nèi)調(diào)用不執(zhí)行。就好像你在淘寶搶購某一件限量熱賣商品時(shí)，你不斷點(diǎn)刷新點(diǎn)購買，可是總有一段時(shí)間你點(diǎn)上是沒有效果，這里就用到了節(jié)流，就是怕點(diǎn)的太快導(dǎo)致系統(tǒng)出現(xiàn)bug。

2、區(qū)別：防抖動是將多次執(zhí)行變?yōu)樽詈笠淮螆?zhí)行，節(jié)流是將多次執(zhí)行變成每隔一段時(shí)間執(zhí)行。

函數(shù)的防抖與節(jié)流是一直的面試話題。對于函數(shù)防抖與節(jié)流的寫法，大家都可能比較熟悉，但是在vue中使用函數(shù)的防抖或者節(jié)流，這里是有一個(gè)小插曲的哦。

vue中的正確使用姿勢

在這個(gè)地方相信好多人的使用方式，會直接定義函數(shù)，然后在函數(shù)中使用debounce的 ，這樣的使用方法是錯(cuò)誤的。

為啥呢？這個(gè)和vue的事件綁定原理有關(guān)，這里不詳細(xì)介紹。如果直接在函數(shù)體內(nèi)部使用的話，最后的結(jié)果是，一個(gè)匿名的立即執(zhí)行函數(shù)來進(jìn)行執(zhí)行，這樣是不對的。詳細(xì)參考

原理

函數(shù)的防抖

函數(shù)的防抖是在多少時(shí)間后再來執(zhí)行函數(shù)，我們可以理解為這樣的一種生活場景（坐升降電梯），在點(diǎn)擊電梯的開門按鈕后，電梯會開門，然后等待一段時(shí)間來關(guān)門。但是如果在等待的期間，有人再次點(diǎn)擊開門按鈕，那么電梯后繼續(xù)等待關(guān)門時(shí)間，直到等待關(guān)門時(shí)間結(jié)束，沒有人來點(diǎn)擊開門按鈕后，電梯才會開始工作。

代碼書寫

第一次非立即執(zhí)行

export function debounce(f, t){
    let timer;
    return (...arg) => {
        clearTimeout(timer);
        timer = setTimeout(() =>{
            f( ...arg)
        }, t)
    }
}

第一次立即執(zhí)行

對于有些場景來說，第一次我不需要等待，需要立即執(zhí)行，例如：打開控制臺獲取窗口試圖大?。ㄟ@里我們需要一直改變窗口的大小，等停下來再次獲取窗口視圖大小）。

export function debounceFirstExe(f, t){
    let timer, flag = true;
    return (...args) => {
        if (flag){
            f(...args);
            flag = false;
        }else {
            clearTimeout(timer);
            timer = setTimeout(() => {
                f(...args);
                flag = true;
            }, t)
        }
    }
}

合并版本

export  function  debounce(f, t,im = false){
    let timer, flag = true;
    return (...args) => {
        // 需要立即執(zhí)行的情況
       if (im){
           if (flag){
               f(...args);
               flag = false;
           }else {
               clearTimeout(timer);
               timer = setTimeout(() => {
                   f(...args);
                   flag = true
               }, t)
           }
       }else {
           // 非立即執(zhí)行的情況
           clearTimeout(timer);
           timer = setTimeout(() => {
               f(...args)
           }, t)
       }
    }
}

函數(shù)防抖對于我們代碼層面我們可以用在哪里呢？

在點(diǎn)贊、輸入框校驗(yàn)、取消點(diǎn)贊、創(chuàng)建訂單等發(fā)送網(wǎng)絡(luò)氫氣的時(shí)候，如果我們連續(xù)點(diǎn)擊按鈕，可能會發(fā)送多次請求。這個(gè)對于后臺來說是不允許的。在鼠標(biāo)每次 resize/scroll 觸發(fā)統(tǒng)計(jì)事件。

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

與函數(shù)防抖的胞兄，函數(shù)節(jié)流的原理也是大同小異，函數(shù)節(jié)流是在一定時(shí)間內(nèi)我只會執(zhí)行一次。

第一次非立即執(zhí)行

export function throttle(f,t){
    let timer=true;
    return (...arg)=>{
        if(!timer){
            return;
        }
        timer=false;
        setTimeout(()=>{
            f(...arg);
            timer=true;
        },t)

    }
}

在效果中，我們點(diǎn)擊了非常多次，但是就只執(zhí)行了4次，因?yàn)槲乙?guī)定的時(shí)間是1000ms執(zhí)行一次。這樣也是減少了執(zhí)行次數(shù)。

第一次立即執(zhí)行版本

export function throttleFirstExt(f, t) {
    let flag = true;
    return (...args) => {
        if (flag) {
            f(...args);
            flag = false;
            setTimeout(() => {
                flag = true
            }, t)
        }
    }
}

這里我們看到了，第一次點(diǎn)擊會立馬執(zhí)行。

合并版

export function throttle(f, t, im = false){
    let flag = true;
    return (...args)=>{
        if(flag){
            flag = false
            im && f(...args)
            setTimeout(() => {
                !im && f(...args)
                flag = true
            },t)
        }
    }
}

應(yīng)用場景:

• DOM 元素的拖拽功能實(shí)現(xiàn)（mousemove）
• 搜索聯(lián)想（keyup）
• 計(jì)算鼠標(biāo)移動的距離（mousemove）
• Canvas 模擬畫板功能（mousemove）
• 射擊游戲的 mousedown/keydown 事件（單位時(shí)間只能發(fā)射一顆子彈）
• 監(jiān)聽滾動事件判斷是否到頁面底部自動加載更多：給 scroll 加了 debounce 后，只有用戶停止?jié)L動后，才會判斷是否到了頁面底部；如果是 throttle 的話，只要頁面滾動就會間隔一段時(shí)間判斷一次.

總結(jié)

到此這篇關(guān)于vue函數(shù)防抖與節(jié)流正確使用的文章就介紹到這了,更多相關(guān)vue函數(shù)防抖與節(jié)流內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論