以前處理過高頻事件,但是沒有好好總結弄一下渠鸽,這回抽點時間說一下。5
做過動畫效果的同學一定經(jīng)常碰到滾動控制的問題徽缚,像滾動或者resize這樣的事件,觸發(fā)頻率太高又沒啥規(guī)律可循猎拨,這個時候就有兩個截流函數(shù)給我們使用:throttle和debounce。
throttle是讓一個函數(shù)在指定的時間執(zhí)行一次额各。比如用戶滾動1s,只觸發(fā)一次scroll事件虾啦。
debounce是讓一個函數(shù)延遲一定的時間然后執(zhí)行,只要觸發(fā)這個函數(shù)痕寓,就重新開始等傲醉,到時間了然后執(zhí)行。有網(wǎng)友給出了形象的電梯比喻這里我貼出來硬毕。
電梯比喻---debounce:(你在進入電梯后發(fā)現(xiàn)這時不遠處走來了了一個人,等10秒鐘吐咳,這個人進電梯后不遠處又有個妹紙姍姍來遲元践,怎么辦,再等10秒单旁,于是妹紙上電梯時又來了一對好基友...,作為感動中國好碼農(nóng)象浑,你要每進一個人就等10秒,直到?jīng)]有人進來死嗦,10秒超時,電梯開動)
下面開動 自己實現(xiàn)一下越除。(注:在lodash underscore 中都實現(xiàn)了截流函數(shù))
現(xiàn)在講一下大概的思路,首先函數(shù)進來需要延遲執(zhí)行摘盆,在延遲執(zhí)行結束之前都不可以再次執(zhí)行,所以我們用wait 作為一個flag作為判斷狼渊,在fn執(zhí)行完畢之后講wait 設定回初始值(也就是允許函數(shù)再次執(zhí)行)类垦。
debounce 函數(shù)
debounce 的思路類似,每一次觸發(fā)函數(shù)蚤认,都要去清除上一次的timer,甚至連wait? 都可以省了蘸嘶。是不是很簡單。
這個只是簡易的實現(xiàn)训唱,lodash弄的比較復雜挚冤,但是基本的原理都是一樣的况增。