請實現乙個節流函式

2022-07-26 20:42:11 字數 1375 閱讀 7022

什麼是節流函式?

簡單講就是讓乙個函式無法在短時間內連續呼叫,只有當上一次函式執行後過了規定的時間間隔,才能進行下一次該函式的呼叫。或者說你在操作的時候不會馬上執行該函式,而是等你不操作的時候才會執行。

函式節流的原理:

可通過使用定時器,在操作的時候讓函式延時執行,如果在這個時間內還在操作,則清除原來的定時器,再建立乙個新的定時器執行。

函式節流非常適用於函式被頻繁呼叫的場景,例如:window.onresize() 事件、mousemove 事件、上傳進度等情況。使用 throttle api 很簡單,那應該如何實現 throttle 這個函式呢?

實現的方案有以下兩種:

這裡我們採用第一種方案來實現,通過閉包儲存乙個 previous 變數,每次觸發 throttle 函式時判斷當前時間和 previous 的時間差,如果這段時間差小於等待時間,那就忽略本次事件觸發。如果大於等待時間就把 previous 設定為當前時間並執行函式 fn。

我們來一步步實現,首先實現用閉包儲存 previous 變數。

const throttle = (fn, wait) =>

}

執行throttle函式後會返回乙個新的function,我們命名為betterfn。

const betterfn =function(...args)

betterfn 函式中可以獲取到 previous 變數值也可以修改,在**監聽或事件觸發時就會執行 betterfn,即betterfn(),所以在這個新函式內判斷當前時間和 previous 的時間差即可。

const betterfn =function(...args) 

}

結合上面兩段**就實現了節流函式,所以完整的實現如下。

//

fn 是需要執行的函式

//wait 是時間間隔

const throttle = (fn, wait = 50) =>

}//demo

//執行 throttle 函式返回新函式

const betterfn = throttle(() => console.log('

fn 函式執行了

'), 1000

) console.log(betterfn)

//每 10 毫秒執行一次 betterfn 函式,但是只有時間差大於 1000 時才會執行 fn

setinterval(betterfn, 1000

) }

**:

class="

demo

">按鈕

python 利用yield實現乙個非同步請求

importtime defconsumer name print s準備吃包子了!name while true baozi yieldprint 包子 s來了,被 s吃了!baozi,name defproducer name c consumer a c2 consumer b c.next ...

實現乙個Memcpy函式

需要考慮記憶體重疊的情況 includeusing namespace std void memcpy void dst,const void src,size t len void ret dst if dst src else return ret int main 那麼為什麼還要考慮重寫mem...

節流函式的實現

函式節流指的是某個函式在一定時間間隔內 例如 3 秒 只執行一次,在這 3 秒內無視後來產生的函式呼叫請求,也不會延長時間間隔。3 秒間隔結束後第一次遇到新的函式呼叫會觸發執行,然後在這新的 3 秒內依舊無視後來產生的函式呼叫請求,以此類推。舉乙個小例子,不知道大家小時候有沒有養過小金魚啥的,養金魚...