資訊專欄INFORMATION COLUMN
摘要：節流分流，與防抖去抖實現原理相似。本文主要討論節流，鏡像文章防抖理解，實踐與實現。分開討論防抖和節流，主要是為了讓一些還不太了解節流防抖的讀者能夠有針對性地，逐一掌握它們。上方為未節流模式，每一次觸發都會繪制一個圓點。
節流(分流)，與防抖（去抖）實現原理相似。本文主要討論節流，鏡像文章：防抖 - 理解，實踐與實現。分開討論防抖和節流，主要是為了讓一些還不太了解節流防抖的讀者能夠有針對性地，逐一掌握它們。
如何用代碼實現節流也是一個要點。本文采用循序漸進地方式，先繪制一個案例的流程圖，再根據流程圖的邏輯編寫節流功能代碼。
文章包含多個可交互案例，可通過博客原文實時查看案例節流案例
同時歡迎訂閱我的博客
點擊運行案例
當鼠標移動時，mousemove事件頻繁被觸發。上方為未節流模式，每一次mousemove觸發都會繪制一個圓點。而下方為節流模式，盡管mosuemove在鼠標移動時被多次觸發，但只有在限定時間間隔才會繪制圓點。
理解和實現節流通過上方案例，可以基本了解節流的作用: 頻繁觸發的事件，事件處理函數在一定的時間間隔內只執行一次。
不過節流函數是如何做到的？ 以上方案例為例，繪制其流程圖如下。
核心參數:
間隔時長
計時器
根據流程圖的思路實現分流函數：
function throttle( func, wait ) {
let timer
function throttled( ...args ) {
const self = this
if ( timer == null ) {
invokeFunc()
addTimer()
}
function addTimer() {
timer = setTimeout( () => {
clearTimer()
}, wait )
}
function invokeFunc() {
func.apply( self, args )
}
}
return throttled
function clearTimer() {
clearTimeout( timer )
timer = null
}
}
接下來，用編寫的節流函數實現上方案例
點擊運行案例
應用場景無限的滾動條
點擊運行案例
總結節流和防抖類似，都能有效優化系統性能，不過使用業務場景有所區別：
防抖既可用于在多次觸發的事件（如文本框逐個輸入文字），也可用于在頻繁觸發的事件（如調整窗口尺寸）。
節流多只用在頻繁觸發的事件（如滾動滾動條）上。
感謝你花時間閱讀這篇文章。如果你喜歡這篇文章,歡迎點贊、收藏和分享，讓更多的人看到這篇文章，這也是對我最大的鼓勵和支持！
同時歡迎訂閱我的博客
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109313.html
摘要：本文主要討論防抖，鏡像文章節流理解，實踐與實現。分開討論防抖和節流，主要是為了讓一些還不太了解防抖節流的讀者能夠有針對性地，逐一掌握它們。防抖是什么結合上方案例，防抖可以理解為多次觸發事件后，事件處理函數只執行一次。 為了完整閱讀體驗，歡迎移步到我的博客原文。 防抖（去抖），以及節流（分流）在日常開發中可能用的不多，但在特定場景，卻十分有用。本文主要討論防抖，鏡像文章：節流 - 理解，...
摘要：起因面試被問到了節流和防抖動自己對這兩個的概念比較模糊都不知道回答了什么鬼從語文和英語學起首先先看字面意思節流的意思就是水龍頭關小點頻率不要那么高防抖動這根彈簧你不要來回蹦了我就要你最后停下來的沒有發生形變的那一刻舉個例子節流在改變窗口大小 起因 面試被問到了節流和防抖動, 自己對這兩個的概念比較模糊, 都不知道回答了什么鬼 從語文和英語學起 首先, 先看字面意思:節流(throttl...
摘要：第一種直接調用避免在不必要的情況下使用，是一個危險的函數，他執行的代碼擁有著執行者的權利。來自于此外，實現需要考慮實例化后對原型鏈的影響。函數柯里化的主要作用和特點就是參數復用提前返回和延遲執行。手寫路徑導航 實現一個new操作符 實現一個JSON.stringify 實現一個JSON.parse 實現一個call或 apply 實現一個Function.bind 實現一個繼承 實現一個J...
摘要：設計模式與開發實踐讀書筆記最近利用碎片時間在上面閱讀設計模式與開發實踐讀書這本書，剛開始閱讀前兩章內容，和大家分享下我覺得可以在項目中用的上的一些筆記。事件綁定暫時這么多，以后會不定期更新一些關于我讀這本書的筆記內容 JavaScript 設計模式與開發實踐讀書筆記 最近利用碎片時間在 Kindle 上面閱讀《JavaScript 設計模式與開發實踐讀書》這本書，剛開始閱讀前兩章內容，...
閱讀 1688·2021-10-13 09:39
閱讀 3160·2021-10-12 10:11
閱讀 554·2021-09-28 09:36
閱讀 2637·2019-08-30 15:55
閱讀 1389·2019-08-30 13:04
閱讀 630·2019-08-29 17:08
閱讀 1909·2019-08-29 14:14
閱讀 3403·2019-08-28 18:23
