防抖與節流:教你傾聽時插話的技巧

来源:https://www.cnblogs.com/xuge2it/archive/2023/02/20/17138950.html
-Advertisement-
Play Games

本文內容主要翻譯自issue 中國外大佬對防抖與節流的解釋, 後面補充了自己的理解和總結。 什麼是防抖與節流 防抖和節流是處理“過於頻繁”發生的事情的常用技術。想象一下,你和朋友見面,朋友正在給你講一個故事,但他們說話時很難停下來。假設您想在可能的情況下不打斷他們滿足他們講故事的興緻,同時還要回應他 ...


本文內容主要翻譯自issue 中國外大佬對防抖與節流的解釋, 後面補充了自己的理解和總結。

什麼是防抖與節流

防抖和節流是處理“過於頻繁”發生的事情的常用技術。想象一下,你和朋友見面,朋友正在給你講一個故事,但他們說話時很難停下來。假設您想在可能的情況下不打斷他們滿足他們講故事的興緻,同時還要回應他們所說的話。 (我知道這可能有點做作,但請耐心等待!)

假設你們永遠不能同時說話。你有幾個策略:

同步

你可以在他們說完每句話時做出回應:

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/08f295b7e32a467e94da9071c1a63262~tplv-k3u1fbpfcp-zoom-1.image

如果您的回覆很短,這可能沒問題。但是,如果您的回答較長,這可能會使他們很難講完這個故事。所以這個策略不是很好。

防抖(Debounced

你可以等他們停止說話。例如,如果他們停頓的時間足夠長,您就可以開始回應:

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/51573c40cc444895b6696844358771a9~tplv-k3u1fbpfcp-zoom-1.image

如果你的朋友偶爾會停下來,這個策略會很有效。但是,如果他們不停地說了幾分鐘,這根本不會讓你回應:

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/60b3648f278f42458077e37066f32bd8~tplv-k3u1fbpfcp-zoom-1.image

節流(Throttled

您可以決定最多每分鐘響應一次。在這裡,您可以計算自己有多久沒有說話了。一旦你一分鐘沒有說話,你就在朋友的下一句話之後插入你的回應:

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/82a76ff9575d4440b7481f1867b2435d~tplv-k3u1fbpfcp-zoom-1.image

如果您的朋友希望您在他們講故事時做出回應,但他們不會為您做這件事而製造停頓,則此策略會很有幫助。但是,如果他們中間停頓了一會,但您仍在無緣無故地等待,此時雙方都沒說話,那就尷尬了:

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/192fcaf36da64d0a9a1d189d2dfbc5e9~tplv-k3u1fbpfcp-zoom-1.image

含義解釋

朋友的“句子”是按鈕點擊或鍵盤輸入等事件。您的“回應”正在更新屏幕。

當用戶做某事太快(例如打字)時,響應每個單獨事件更新屏幕太慢。因此,您可以使用防抖或節流,要麼等待用戶停止輸入(防抖),要麼每隔一段時間更新一次屏幕,比如每秒一次(節流)。

補充舉例

游戲中:防抖就是 B 回城,以按下的最後一下為準。節流就是 QWER,按一下再按得等技能冷卻才能再按。

生活中:假設電梯有兩種運行策略 防抖和 節流,超時設定為 15 秒,不考慮容量限制。

電梯第一個人進來後,15 秒後準時運送一次,這是節流

電梯第一個人進來後,等待 15 秒。如果過程中又有人進來,15 秒等待重新計時,直到 15 秒後開始運送,這是防抖

編程中:搜索頁面,用戶連續輸入,等停下來再去觸發搜索介面,這是防抖。

美團後臺位置服務不能過於頻繁地調用後臺更新用戶位置,必須以特定頻率調用後端介面,這就是節流。

定義總結

防抖: n 秒後在執行該事件,若在 n 秒內被重覆觸發,則重新計時,所以防抖是操作時不執行不操作時執行。

節流: 高頻事件觸發,但在 n 秒內只會執行一次,所以節流會稀釋函數的執行頻率,到時候了必須執行一次。

圖解說明

Untitled.png

圖片來著Dart/Flutter 防抖與節流

為什麼防抖有 trailing 模式和 leading 模式?

原因:您可能會發現防抖事件在觸發函數執行之前等待,直到事件停止如此迅速地發生,這讓您感到惱火。(trailing edge 的情況),為什麼不立即觸發函數執行,使其表現得與原始的未防抖處理程式完全一樣?於是就有了 leading edge 的情況。

如果覺得文章對你有幫助,點贊、收藏、關註、評論,一鍵四連支持,你的支持就是我創作最大的動力。

❤️ 本文原創聽蟬 公眾號:碼里特別有禪 歡迎關註原創技術文章第一時間推送 ❤️


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MongoDB vs Elasticsearch | | MongoDB | ElasticSearch | 備註 | | | | | | | 定位 | (文檔型)資料庫 | (文檔型)搜索引擎 | 一個管理數據,一個檢索數據 | | 資源占用 | 一般 | 高 | mongo使用c++, es使用 ...
  • EXISTS語法解析 EXISTS 運算符用於判斷查詢子句是否有記錄,如果有一條或多條記錄存在返回 True,否則返回 False。 比如說下邊的語法,子查詢中的column_name可以和主查詢中的列名字不一樣,因為子查詢只返回yes or no。 subquery 是一個受限的 SELECT 語 ...
  • 摘要:集群運行過程中,根據集群的綜合負載和業務接入情況進行分析:增加CN可以適當降低CPU消耗,增大接入連接數,分散CN節點業務壓力,根據實際情況來識別是否要增加CN,如果是提升集群容量和擴展比能力,建議進行擴容操作。 本文分享自華為雲社區《【玩轉PB級數倉GaussDB(DWS)】線上運維-線上增 ...
  • 在當前的數字化轉型浪潮下,“基礎設施、配套設備、應用探索”的數字校園1.0階段即將步入尾聲、亦或已經完結,不同地區和類型的高校通過各類信息化系統和基礎設施已經初步實現了業務數字化,整個數字校園的信息基礎設施底座已有一定基礎、信息時代教育治理新模式正在逐步呈現、信息技術支持科研創新初見成效。 接下來, ...
  • 今天非常的倒霉,因為學習了Vue的相關知識,想自己寫一個後端伺服器來練習一下Vue 然後 忘記了Docker中Mysql的密碼。。。 很抽象 下麵是我的解決方法 一、如果在本地的Navicat Premium上連接過資料庫,就可以使用工具導出連接 二、用編輯器打開導出的鏈接文件 就可以看到 用戶名、 ...
  • 一:背景 1. 講故事 相信大家在使用 SQLSERVER 的過程中經常會遇到 阻塞 和 死鎖,尤其是 死鎖,比如下麵的輸出: (1 row affected) Msg 1205, Level 13, State 51, Line 5 Transaction (Process ID 62) was ...
  • GreatSQL社區原創內容未經授權不得隨意使用,轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本,使用上與MySQL一致。 作者:vatebur 文章來源:GreatSQL社區投稿 UOS二進位安裝資料庫和其他 Linux 基本一樣,網上命令行安裝的教程很多。考慮到 UOS ...
  • 本文介紹了TiDB資料庫特性及在之家的發展歷程,典型業務應用場景,TiDB具有相容MySQL協議,易水平擴展、高可用、強一致,HTAP等特性,在之家多個重要業務得到應用。另外文章還介紹了之家TIDB自動化運維建設情況及應用實踐遇到的問題及解決。 未來之家TiDB計劃繼續進行TiDB運維體系建設,並... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...