国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript 函數節流和函數去抖應用場景辨析

ZHAO_ / 2771人閱讀

摘要：函數節流和去抖的出現場景，一般都伴隨著客戶端的事件監聽。函數節流的核心是，讓一個函數不要執行得太頻繁，減少一些過快的調用來節流。

概述

也是好久沒更新 源碼解讀，看著房價蹭蹭暴漲，心里也是五味雜陳，對未來充滿恐懼和迷茫 ...（敢問一句你們上岸了嗎）

言歸正傳，今天要介紹的是 underscore 中兩個重要的方法，函數節流和函數去抖。這篇文章不會涉及具體的代碼實現（關于代碼實現請期待下文），會從零開始介紹函數節流和函數去抖的概念，辨析應用場景。為什么我對這兩個方法情有獨鐘要花大篇幅去介紹？因為就是它們帶我入了「underscore 源碼解讀」的坑（詳見 一次發現underscore源碼bug的經歷以及對學術界『拿來主義』的思考）。

函數節流和去抖的出現場景，一般都伴隨著客戶端 DOM 的事件監聽。舉個例子，實現一個原生的拖拽功能（不能用 H5 Drag&Drop API），需要一路監聽 mousemove 事件，在回調中獲取元素當前位置，然后重置 dom 的位置（樣式改變）。如果我們不加以控制，每移動一定像素而觸發的回調數量是會非常驚人的，回調中又伴隨著 DOM 操作，繼而引發瀏覽器的重排與重繪，性能差的瀏覽器可能就會直接假死，這樣的用戶體驗是非常糟糕的。我們需要做的是降低觸發回調的頻率，比如讓它 500ms 觸發一次，或者 200ms，甚至 100ms，這個閾值不能太大，太大了拖拽就會失真，也不能太小，太小了低版本瀏覽器可能就會假死，這樣的解決方案就是函數節流，英文名字叫「throttle」。函數節流的核心是，讓一個函數不要執行得太頻繁，減少一些過快的調用來節流。

說完函數節流，再看它的好基友函數去抖（debounce）。思考這樣一個場景，對于瀏覽器窗口，每做一次 resize 操作，發送一個請求，很顯然，我們需要監聽 resize 事件，但是和 mousemove 一樣，每縮小（或者放大）一次瀏覽器，實際上會觸發 N 多次的 resize 事件，用節流？節流只能保證定時觸發，我們一次就好，這就要用去抖。簡單的說，函數去抖就是對于一定時間段的連續的函數調用，只讓其執行一次。

throttle 應用場景

函數節流有哪些應用場景？哪些時候我們需要間隔一定時間觸發回調來控制函數調用頻率？

DOM 元素的拖拽功能實現（mousemove）

射擊游戲的 mousedown/keydown 事件（單位時間只能發射一顆子彈）

計算鼠標移動的距離（mousemove）

Canvas 模擬畫板功能（mousemove）

搜索聯想（keyup）

監聽滾動事件判斷是否到頁面底部自動加載更多：給 scroll 加了 debounce 后，只有用戶停止滾動后，才會判斷是否到了頁面底部；如果是 throttle 的話，只要頁面滾動就會間隔一段時間判斷一次 https://github.com/hanzichi/u...

debounce 應用場景

函數去抖有哪些應用場景？哪些時候對于連續的事件響應我們只需要執行一次回調？

每次 resize/scroll 觸發統計事件

文本輸入的驗證（連續輸入文字后發送 AJAX 請求進行驗證，驗證一次就好）

小結

函數節流和函數去抖的核心其實就是限制某一個方法被頻繁觸發，而一個方法之所以會被頻繁觸發，大多數情況下是因為 DOM 事件的監聽回調，而這也是函數節流以及去抖多數情況下的應用場景。至于函數節流和去抖方法的具體代碼實現以及調用方式，下文我們再做分享。

附另外兩篇關于 underscore 函數節流以及去抖源碼剖析的文章

underscore 函數去抖的實現

underscore 函數節流的實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87956.html

相關文章

  • js中函數節流&函數去抖

    摘要：節流保證在一定時間內，只能觸發一次。我們在嘗試一下去抖消抖，消除抖動，感覺這個更好聽有沒有什么現成的上的一次發現源碼的經歷以及對學術界拿來主義的思考函數節流和函數去抖應用場景辨析函數去抖的實現 開篇先提幾個問題？ 1.做搜索框的時候你使用什么事件？change?blur?keyup？你想要的效果是什么？ 2.scroll事件怎么就觸發？是滾一段距離觸發一次？還是滾一圈觸發一次？還是滾...

    王軍 評論0 收藏0

  • 函數節流和防抖

    摘要：當第二次調用該函數時，它會清除前一次的定時器并設置另一個。然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器，然后延遲一定時間再執行。參考文章函數節流與函數防抖函數節流和函數去抖應用場景辨析函數節流函數防抖實現原理分析 前言 事件的觸發權很多時候都屬于用戶，有些情況下會產生問題： 向后臺發送數據，用戶頻繁觸發，對服務器造成壓力 一些瀏覽器事件:window.onresi...

    didikee 評論0 收藏0

  • 函數節流和防抖

    摘要：當第二次調用該函數時，它會清除前一次的定時器并設置另一個。然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器，然后延遲一定時間再執行。參考文章函數節流與函數防抖函數節流和函數去抖應用場景辨析函數節流函數防抖實現原理分析 前言 事件的觸發權很多時候都屬于用戶，有些情況下會產生問題： 向后臺發送數據，用戶頻繁觸發，對服務器造成壓力 一些瀏覽器事件:window.onresi...

    huaixiaoz 評論0 收藏0

  • 函數節流和防抖

    摘要：當第二次調用該函數時，它會清除前一次的定時器并設置另一個。然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器，然后延遲一定時間再執行。參考文章函數節流與函數防抖函數節流和函數去抖應用場景辨析函數節流函數防抖實現原理分析 前言 事件的觸發權很多時候都屬于用戶，有些情況下會產生問題： 向后臺發送數據，用戶頻繁觸發，對服務器造成壓力 一些瀏覽器事件:window.onresi...

    CHENGKANG 評論0 收藏0

  • JS專題之去抖函數

    摘要：如果本次定時器沒有被清除，時間到后就會自然執行事件處理函數。綁定去抖后的事件回調函數綁定回調函數的屬性方法，點擊頁面，重置去抖效果異步請求清空上一次事件觸發的定時器重置為從而下一次事件觸發就能立即執行。 一、前言 為什么會有去抖和節流這類工具函數？ 在用戶和前端頁面的交互過程中，很多操作的觸發頻率非常高，比如鼠標移動 mousemove 事件, 滾動條滑動 scroll 事件, 輸...

    ivydom 評論0 收藏0

發表評論

0條評論

ZHAO_

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<