js 中的截流函數(shù)throttle 和 debounce

以前處理過高頻事件,但是沒有好好總結弄一下渠鸽,這回抽點時間說一下。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ù))


throttle 簡單的實現(xiàn)

現(xiàn)在講一下大概的思路,首先函數(shù)進來需要延遲執(zhí)行摘盆,在延遲執(zhí)行結束之前都不可以再次執(zhí)行,所以我們用wait 作為一個flag作為判斷狼渊,在fn執(zhí)行完畢之后講wait 設定回初始值(也就是允許函數(shù)再次執(zhí)行)类垦。

debounce 函數(shù)


debounce 的思路類似,每一次觸發(fā)函數(shù)蚤认,都要去清除上一次的timer,甚至連wait? 都可以省了蘸嘶。是不是很簡單。

這個只是簡易的實現(xiàn)训唱,lodash弄的比較復雜挚冤,但是基本的原理都是一樣的况增。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末巡通,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌誊锭,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,029評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蟆沫,死亡現(xiàn)場離奇詭異温治,居然都是意外死亡,警方通過查閱死者的電腦和手機熬荆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,395評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來累盗,“玉大人,你說我怎么就攤上這事若债。” “怎么了蠢琳?”我有些...
    開封第一講書人閱讀 157,570評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長蓝牲。 經(jīng)常有香客問我躏碳,道長搞旭,這世上最難降的妖魔是什么菇绵? 我笑而不...
    開封第一講書人閱讀 56,535評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮翎嫡,結果婚禮上永乌,老公的妹妹穿的比我還像新娘惑申。我一直安慰自己翅雏,他們只是感情好,可當我...
    茶點故事閱讀 65,650評論 6 386
  • 文/花漫 我一把揭開白布绩脆。 她就那樣靜靜地躺著橄抹,像睡著了一般靴迫。 火紅的嫁衣襯著肌膚如雪楼誓。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,850評論 1 290
  • 那天主守,我揣著相機與錄音,去河邊找鬼丸逸。 笑死,一個胖子當著我的面吹牛黄刚,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播憔维,決...
    沈念sama閱讀 39,006評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼业扒,長吁一口氣:“原來是場噩夢啊……” “哼检吆!你這毒婦竟也來了程储?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,747評論 0 268
  • 序言:老撾萬榮一對情侶失蹤摊灭,失蹤者是張志新(化名)和其女友劉穎败徊,沒想到半個月后帚呼,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體皱蹦,經(jīng)...
    沈念sama閱讀 44,207評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,536評論 2 327
  • 正文 我和宋清朗相戀三年沈自,在試婚紗的時候發(fā)現(xiàn)自己被綠了辜妓。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片酥泛。...
    茶點故事閱讀 38,683評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖呆躲,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情插掂,我是刑警寧澤腥例,帶...
    沈念sama閱讀 34,342評論 4 330
  • 正文 年R本政府宣布酝润,位于F島的核電站,受9級特大地震影響要销,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜疏咐,卻給世界環(huán)境...
    茶點故事閱讀 39,964評論 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望借跪。 院中可真熱鬧,春花似錦掏愁、人聲如沸卵牍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,772評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至溅蛉,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間船侧,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,004評論 1 266
  • 我被黑心中介騙來泰國打工预柒, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人宜鸯。 一個月前我還...
    沈念sama閱讀 46,401評論 2 360
  • 正文 我出身青樓遮怜,卻偏偏與公主長得像,于是被迫代替她去往敵國和親锯梁。 傳聞我的和親對象是個殘疾皇子焰情,可洞房花燭夜當晚...
    茶點故事閱讀 43,566評論 2 349

推薦閱讀更多精彩內(nèi)容

  • 長久以來剥懒,面向對象在 JavaScript 編程范式中占據(jù)著主導地位。不過初橘,最近人們對函數(shù)式編程的興趣正在增長。函...
    神刀閱讀 459評論 0 0
  • 這篇文章將介紹如何使用原生 JS (主要使用 ES6 語法)實現(xiàn)全屏滾動插件批狱,兼容 IE 10+、手機觸屏赔硫,Mac...
    L小庸閱讀 1,211評論 1 4
  • 首先要明白 節(jié)流 Throttle 和 去抖動 Debounce 兩者是有區(qū)別的盐肃,很多人一開始都會搞混爪膊。先講講去抖...
    圭寧_2ce3閱讀 5,028評論 1 9
  • 某些情況下砸王,例如響應鼠標移動、窗口大小調(diào)整谦铃、頁面滾動的事件,觸發(fā)的頻率較高驹闰。如果這個時候需要處理的函數(shù)稍微復雜點,...
    Tiny_z閱讀 1,242評論 0 0
  • 許多人都說算法是程序的核心师妙,算法的好壞決定了程序的質(zhì)量屹培。作為一個初級phper默穴,雖然很少接觸到算法方面的東西褪秀。但是...
    西貝巴巴閱讀 743評論 1 19