欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何理解JS函數(shù)防抖和函數(shù)節(jié)流

 更新時(shí)間:2021年05月15日 10:17:21   作者:lovin  
函數(shù)防抖和函數(shù)節(jié)流都是對(duì)函數(shù)進(jìn)行特殊的設(shè)置,減少該函數(shù)在某一時(shí)間段內(nèi)頻繁觸發(fā)帶來的副作用。二者只是采用的設(shè)置方式和原理不一樣,其最終的目的是一樣的。

概述

函數(shù)防抖和函數(shù)節(jié)流都是定義一個(gè)函數(shù),該函數(shù)接收一個(gè)函數(shù)作為參數(shù),并返回一個(gè)添加了防抖或節(jié)流功能后的函數(shù)。

因此可以將函數(shù)防抖和函數(shù)節(jié)流看作是一個(gè)函數(shù)工廠,負(fù)責(zé)對(duì)傳進(jìn)來的函數(shù)進(jìn)行相應(yīng)的加工改造,然后產(chǎn)出一個(gè)新的帶有某種功能的函數(shù)。

函數(shù)防抖是某一時(shí)間內(nèi)只執(zhí)行一次,而函數(shù)節(jié)流是間隔時(shí)間執(zhí)行

假如有這樣一個(gè)場景:在某一頁面,有一個(gè)按鈕是 "加載更多",這個(gè)按鈕的作用就是使用 ajax 從后端服務(wù)器請(qǐng)求更多的數(shù)據(jù)展示在頁面,我們都知道,ajax 請(qǐng)求的響應(yīng)是一個(gè)異步的,會(huì)存在一定的響應(yīng)時(shí)間,如果用戶在點(diǎn)擊了該按鈕后,立馬又點(diǎn)擊了一下該按鈕,按照常規(guī)回調(diào)函數(shù)的操作,回調(diào)函數(shù)會(huì)立馬又執(zhí)行一次,那么就是用戶短時(shí)間內(nèi)點(diǎn)擊了兩次 "加載更多" 按鈕后就會(huì)執(zhí)行回調(diào)函數(shù)向后端發(fā)起了兩次一模一樣的 ajax 請(qǐng)求,服務(wù)器會(huì)一一接收請(qǐng)求并處理返回?cái)?shù)據(jù),短時(shí)間內(nèi)兩次請(qǐng)求還好,如果用戶連續(xù)點(diǎn)擊了 n 次 "加載更多" 按鈕呢?那就會(huì)短時(shí)間內(nèi)向服務(wù)器發(fā)送了 n 次一模一樣的請(qǐng)求,每次后端處理 ajax 請(qǐng)求后返回?cái)?shù)據(jù)后頁面就會(huì)重新再渲染一次,盡管內(nèi)容沒有改變,這樣就會(huì)帶來性能上的問題,不僅為服務(wù)器帶去了壓力,也為瀏覽器帶來了不必要的渲染,這就是函數(shù)頻繁執(zhí)行帶來的副作用。

那么如何設(shè)置這個(gè)按鈕的點(diǎn)擊事件回調(diào)函數(shù)才能減少該函數(shù)頻繁執(zhí)行帶來的副作用呢?

1. 函數(shù)防抖(debounce)

函數(shù)防抖的設(shè)計(jì)思路就是在函數(shù)執(zhí)行前加一個(gè)等待時(shí)間,在這個(gè)等待時(shí)間內(nèi)如果該函數(shù)又需要執(zhí)行一次,就重新計(jì)算等待時(shí)間,再次等待,依次類推,直到等待時(shí)間到了,還沒有等到函數(shù)又需要執(zhí)行的情況,才會(huì)執(zhí)行這個(gè)函數(shù)。

就拿上述的場景來說,假設(shè)向后臺(tái)發(fā)送 ajax 請(qǐng)求的響應(yīng)時(shí)間大概是在 2s 左右,那就設(shè)置這個(gè)等待時(shí)間為 2s,當(dāng)用戶第一次點(diǎn)擊"加載更多"按鈕后,該回調(diào)函數(shù)并沒有立即執(zhí)行,也就是還沒有開始發(fā)送 ajax,此時(shí)該函數(shù)在等待,如果在 2s 內(nèi)用戶又點(diǎn)擊了"加載更多",那就重新計(jì)算等待時(shí)間,再等待 2s ,此時(shí) 2s 過去了,用戶沒再第三次點(diǎn)擊"加載更多"按鈕了,那么該函數(shù)就開始執(zhí)行了,向后端發(fā)送 ajax 請(qǐng)求了。

函數(shù)防抖實(shí)現(xiàn)方式如下:

function debounce(fn, delay){
    let timeId = null
    return function(){
        let context = this
        if(timeId){window.clearTimeout(timeId)}
        timeId = setTimeout(()=>{
            fn.apply(context, arguments)
            timeId = null
        },delay)
    }
}

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

函數(shù)節(jié)流的設(shè)計(jì)思路是在函數(shù)執(zhí)行后加一個(gè)冷卻時(shí)間,函數(shù)在第一次執(zhí)行時(shí)是立馬執(zhí)行,但在其執(zhí)行完后設(shè)置一個(gè)冷卻時(shí)間,在冷卻時(shí)間內(nèi),該函數(shù)不能再次執(zhí)行,直到冷卻時(shí)間結(jié)束允許該函數(shù)執(zhí)行了,才可以再次執(zhí)行。

就拿上述的場景來說,冷卻時(shí)間假設(shè)也設(shè)置為 2s,在用戶第一次點(diǎn)擊"加載更多" 后按鈕的回調(diào)函數(shù)就會(huì)執(zhí)行,也就是會(huì)向后臺(tái)發(fā)送 ajax 請(qǐng)求,此時(shí)用戶又立馬再次點(diǎn)擊了"加載更多"按鈕,由于此刻 2s 的冷卻時(shí)間還沒有到,那么就會(huì)給第二次的函數(shù)執(zhí)行加上一個(gè)延遲執(zhí)行。

function throttle(fn, delay){
    let canUse = true
    return function(){
        if(canUse){
            fn.apply(this, arguments)
            canUse = false
            setTimeout(()=>canUse=true, delay)
        }
    }
}

以上就是如何理解JS函數(shù)防抖和函數(shù)節(jié)流的詳細(xì)內(nèi)容,更多關(guān)于JS函數(shù)防抖和函數(shù)節(jié)流的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評(píng)論