前端 js 日常開發中，在頁面滑鼠移動 mousemove，或視窗的 resize、scroll，輸入框內容校驗等高頻操作時，如果事件處理函式呼叫的頻率無限制，會加重瀏覽器的負擔，如果處理不當或放任不管很容易引起瀏覽器卡死，導致使用者體驗非常差。此時我們可以採用 debounce（防抖）和 throttle（節流）的方式來減少呼叫頻率，同時又不影響實際效果。
一、 函式防抖
函式防抖（debounce）：當持續觸發事件時，一定時間段內沒有再觸發事件，事件處理函式才會執行一次；如果設定的時間到來之前，又一次觸發了事件，就重新開始延時。
以滑鼠移動為例，當滑鼠移動時，計算滑鼠當前的位置。通常情況下，我們的**如下：
實際執行時，我們會發現，只要滑鼠移動，控制台就會不停的輸出結果。這樣的執行頻率太高了，然而我們並不需要這麼高的執行頻率。此時，就可以使用防抖來減少無意義的執行。思路如下：在第一次觸發事件時，不會立即執行處理函式，而是給出乙個延時期限（如1秒）。如果在1秒延時內，沒有再次觸發事件，則執行處理函式；如果在1秒延時時間內，再次觸發事件，則取消當前的計時，重新開始計時。這樣，在短時間內大量觸發同一事件，最後只會執行一次。
具體示例**如下（用到js閉包和settimeout）：
執行以上**，當滑鼠持續移動，觸發 mousemove 事件時，事件處理函式 handlemousemove 只在停止移動1000毫秒之後才會呼叫一次；而在持續移動滑鼠，觸發 mousemove 事件的過程中，事件處理函式 handlemousemove 一直沒有執行。對於函式防抖，如果事件一直持續觸發（如滑鼠在螢幕上不停移動），只要不停止觸發，理論上是不會執行處理函式。不過，如果想要在事件觸發的過程中，每隔固定的時間，執行一次事件處理函式，就要用到函式節流。
二、函式節流
函式節流（throttle）：當持續觸發事件時，保證一定時間段內只呼叫一次事件處理函式。節流通俗解釋就比如給草坪澆水，閥門一開啟，就開始放水；不過我們不能一直讓水留著，最好是按照固定的時間間隔（如1天）自動開關。
函式節流主要有兩種實現方法：時間戳和定時器。
接下來仍以滑鼠移動為例，每隔1秒，計算滑鼠當前位置。分別用兩種方法實現節流。
2.1 節流throttle**（時間戳）：
以上**，當 mousemove 事件觸發時，在超過指定時間間隔（2秒）後再次觸發事件，會執行第一次事件處理函式；而後如果持續頻繁地觸發事件，也都是每超過delay時間（2秒）執行一次。2.2 節流throttle**（定時器）：
以上**，當觸發事件的時候，我們設定乙個定時器，直到delay時間（2秒）後，定時器執行事件處理函式，並且清空定時器，這樣就可以設定下個定時器。當第一次觸發事件時，不會立即執行函式，而是在delay秒（2秒）後才執行。而後如果持續頻繁地觸發事件，也都是每delay時間（2秒）執行一次。當最後一次停止觸發後，由於定時器的delay延遲，可能還會執行一次事件處理函式。總結
函式防抖：將多次操作合併為一次操作進行。原理是維護乙個計時器，規定在delay時間後觸發函式，但是如果在delay時間內再次觸發的話，就會取消之前的計時器而重新設定。這樣一來，只有最後一次操作能被觸發。
函式節流：使得一定時間內只觸發一次函式。原理是通過判斷是否到達一定時間來觸發函式。函式節流不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函式。
防抖和節流簡介
背景 近期經常被問到防抖和節流，之前專案中也有遇到並且解決過，猛地一問這麼專業的術語如果之前沒有聽過還真容易發蒙，因此簡單整理一下，希望對需要的小夥伴們有所幫助。1.判斷回到頂部按鈕的顯示時機，一般需求是當頁面滑動距離頂部一定距離之後才需要顯示，此時我們一般只需要監聽瀏覽器滾動事件，返回當前滾動條與...
防抖和節流簡介
當事件被頻繁觸發時，不想讓其頻繁執行事件處理函式的一種解決方案。該方案通過設定乙個週期延遲執行動作，如果週期內又被重新觸發，則重新設定週期，直到週期結束，執行動作。節流的方案是通過設定乙個週期，在週期內只執行一次，如果在週期內重新觸發事件，則不執行。乙個週期結束後，開始新的週期。頻繁觸發事件會占用較...
js防抖和節流
在進行視窗的resize scroll，輸入框內容校驗等操作時，如果事件處理函式呼叫的頻率無限制，會加重瀏覽器的負擔，導致使用者體驗非常糟糕。此時我們可以採用debounce 防抖 和throttle 節流 的方式來減少呼叫頻率，同時又不影響實際效果。函式防抖 函式防抖 debounce 當持續觸發...