資訊專欄INFORMATION COLUMN
摘要：目的都是為了降低回調函數執行頻率，節省計算機資源，優化性能，提升用戶體驗。函數防抖事件頻繁觸發的情況下，只有經過足夠的空閑時間，才執行代碼一次。
“函數節流”和“函數防抖”的對比分析 一、前言
前端開發中，“函數節流（throttle）” 和 “函數防抖（debounce）” 作為常用的性能優化方法，兩者都是用于優化高頻率執行 js 代碼的手段，那具體它們有什么異同點呢？有對這兩個概念不太了解的小伙伴，可以移步本人之前所寫的 JS進階篇1---函數節流（throttle） 和 JS進階篇2---函數防抖（debounce）。
二、背景介紹大家都知道，液晶顯示器的屏幕刷新率通常為 60Hz ，即每秒屏幕內容刷新 60 次，那為什么是 60 次，而不是 30 次，或者 90 次呢？這是因為，當液晶顯示器的屏幕刷新率為 60Hz 的時候（這里只討論液晶顯示器），人肉眼再也不能察覺出屏幕的閃爍現象，低于這個刷新頻率畫面會有卡頓現象，而高于這個頻率的話，又會造成額外的資源和能源浪費，因此，液晶顯示器的默認屏幕刷新率為 60Hz。
同理，在前端開發過程中，有一些會被高頻觸發的事件，例如 resize、scroll、mousemove 等，但有些時候我們并不希望在事件持續觸發的過程中那么頻繁地去執行函數，達到一定頻率就足夠了，因為超過這個頻率之后，無論代碼執行多少次，帶來的效果也是一樣，所以倒不如把 js 代碼的執行次數控制在合理的范圍。這樣既可以節省計算機資源，又可以保證瀏覽的流暢性，這就是 “函數節流” 和 “函數防抖” 要解決的問題。
三、異同分析 相同點實現：都可以通過使用 setTimeout 實現。
目的：都是為了降低回調函數執行頻率，節省計算機資源，優化性能，提升用戶體驗。
本質：都是通過減少實際邏輯處理過程的執行來提高事件處理函數運行性能的手段，實質上并未減少事件觸發次數。
不同點函數節流：一定時間內，控制 js 方法只執行一次。（例如：通常每隔一段時間，如 3s，人就會眨一次眼睛）。
函數防抖：事件頻繁觸發的情況下，只有經過足夠的空閑時間，才執行代碼一次。（舉個栗子：乘坐電梯時，電梯只有檢測到沒有人進入，并經過一段時間之后（例如 10s），才會關閉電梯入口運行）。
函數節流：聲明一個變量當標志位，記錄當前代碼是否在執行。如果空閑，則可以正常觸發方法執行。如果代碼正在執行，則取消這次方法執行，直接 return。
函數防抖：需要一個 setTimeout 來輔助實現，延遲執行需要執行的代碼。如果方法多次觸發，則把上次記錄的延遲執行代碼用 clearTimeout 清掉，重新開始計時。如果在計時期間事件沒有被重新觸發，才執行代碼一次。
函數節流：函數節流的要點是，聲明一個變量當標志位，記錄當前代碼是否在執行。
函數防抖：用 setTimeout 函數做緩存池，而且可以輕易地清除待執行的代碼。
“函數節流” 使用場景
百度搜索框的輸入聯想功能
防止高頻點擊提交，防止表單重復提交
懶加載、加載更多、圖片瀑布流或監聽滾動條位置
“函數防抖” 使用場景
用戶名、手機號、郵箱輸入驗證
搜索框輸入關鍵字后，只需用戶最后一次輸入完，再發送請求
改變瀏覽器窗口大小時，只需窗口調整完成后，再執行 resize 事件中的函數，計算窗口大小，重新排布元素，防止重復渲染。
心得總結不管是 “函數節流” 還是 “函數防抖”，都是用來進行性能優化的方式，也都是在項目開發過程中，為了解決開發中的實際問題而慢慢發展而來的，一定要在合適的場合才用正確的方法使用它們，切忌濫用，不然不僅不會發揮它們該有的作用，還會影響代碼執行的正確性。有疑問或者建議，記得在評論區提出哦，歡迎留言！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105100.html
摘要：函數防抖的要點，是需要一個來輔助實現，延遲運行需要執行的代碼。若計時期間事件沒有被重新觸發，等延遲時間計時完畢，則執行目標代碼。而非立即執行版指的是觸發事件后函數會立即執行，然后秒內不觸發事件才能繼續執行函數的效果。。 JS中的函數防抖 一、什么是函數防抖 概念：函數防抖（debounce），就是指觸發事件后，在 n 秒內函數只能執行一次，如果觸發事件后在 n 秒內又觸發了事件，則會重...
摘要：專題系列共計篇，主要研究日常開發中一些功能點的實現，比如防抖節流去重類型判斷拷貝最值扁平柯里遞歸亂序排序等，特點是研究專題之函數組合專題系列第十六篇，講解函數組合，并且使用柯里化和函數組合實現模式需求我們需要寫一個函數，輸入，返回。 JavaScript 專題之從零實現 jQuery 的 extend JavaScritp 專題系列第七篇，講解如何從零實現一個 jQuery 的 ext...
摘要：運用防抖和節流可以有效降低代碼的執行頻率，從而解決高頻率事件的頁面卡頓問題。在階段布局，最終確定顯示的位置和大小。在函數中，首先定義了一個空的定時器變量，用來計算時間間隔。還有一點要注意，在中一定要清楚定時器，不然會影響的條件判斷。 啥是節流？ 節流是保證在一段時間內，代碼只執行了一次。這個一段時間內指的是不管用戶操作了幾次，最終僅執行一次。比如說一個按鈕，用戶狂點按鈕，但是如果用節流...
摘要：運用防抖和節流可以有效降低代碼的執行頻率，從而解決高頻率事件的頁面卡頓問題。在階段布局，最終確定顯示的位置和大小。在函數中，首先定義了一個空的定時器變量，用來計算時間間隔。還有一點要注意，在中一定要清楚定時器，不然會影響的條件判斷。 啥是節流？ 節流是保證在一段時間內，代碼只執行了一次。這個一段時間內指的是不管用戶操作了幾次，最終僅執行一次。比如說一個按鈕，用戶狂點按鈕，但是如果用節流...
閱讀 3025·2023-04-25 18:00
閱讀 2229·2021-11-23 10:07
閱讀 4076·2021-11-22 09:34
閱讀 1252·2021-10-08 10:05
閱讀 1576·2019-08-30 15:55
閱讀 3442·2019-08-30 11:21
閱讀 3349·2019-08-29 13:01
閱讀 1384·2019-08-26 18:26
