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