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弄的比較復雜,但是基本的原理都是一樣的。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

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

友情鏈接更多精彩內容