什麼是節流函式?
簡單講就是讓乙個函式無法在短時間內連續呼叫,只有當上一次函式執行後過了規定的時間間隔,才能進行下一次該函式的呼叫。或者說你在操作的時候不會馬上執行該函式,而是等你不操作的時候才會執行。
函式節流的原理:
可通過使用定時器,在操作的時候讓函式延時執行,如果在這個時間內還在操作,則清除原來的定時器,再建立乙個新的定時器執行。
函式節流非常適用於函式被頻繁呼叫的場景,例如: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 秒內依舊無視後來產生的函式呼叫請求,以此類推。舉乙個小例子,不知道大家小時候有沒有養過小金魚啥的,養金魚...