javascript
JS中的防抖跟节流(DebounceThrottle)
前言：
在進行窗口的resize、scroll或輸入框的change、click等事件，輸入框內容校驗等操作時，如果事件處理函數調用的頻率無限制，會加重瀏覽器的負擔，導致用戶體驗非常糟糕。此時我們可以采用debounce（防抖）和throttle（節流）的方式來減少調用頻率，同時又不影響實際效果。
函數防抖(debounce)：
當持續觸發事件時，一定時間段內沒有再觸發事件，事件處理函數才會執行一次，如果設定的時間到來之前，又一次觸發了事件，就重新開始延時。如下圖，持續觸發click事件時，并不執行debounce函數，當1000毫秒內沒有觸發click事件時，才會延時觸發click事件。
代碼示例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>防抖</title> </head> <body><button id="debounce">點我防抖！</button><script>window.onload = function() {// 1、獲取這個按鈕，并綁定事件var myDebounce = document.getElementById("debounce");myDebounce.addEventListener("click", debounce(sayDebounce));}// 2、防抖功能函數，接受傳參function debounce(fn) {// 4、創建一個標記用來存放定時器的返回值let timeout = null;return function() {// 5、每次當用戶點擊/輸入的時候，把前一個定時器清除clearTimeout(timeout);// 6、然后創建一個新的 setTimeout，// 這樣就能保證點擊按鈕后的 interval 間隔內// 如果用戶還點擊了的話，就不會執行 fn 函數timeout = setTimeout(() => {fn.call(this, arguments);}, 1000);};}// 3、需要進行防抖的事件處理function sayDebounce() {// ... 有些需要防抖的工作，在這里執行console.log("防抖成功！");}</script> </body> </html>防抖效果
當持續觸發click事件時，事件處理函數debounce只在停止點擊1000毫秒之后才會調用一次，也就是說在持續觸發click事件的過程中，事件處理函數debounce一直沒有執行。
函數節流（throttle）：
當持續觸發事件時，保證一定時間段內只調用一次事件處理函數。節流通俗解釋就比如我們水龍頭放水，閥門一打開，水嘩嘩的往下流，秉著勤儉節約的優良傳統美德，我們要把水龍頭關小點，最好是如我們心意按照一定規律在某個時間間隔內一滴一滴的往下滴。如下圖，持續觸發click事件時，并不立即執行handle函數，每隔1000毫秒才會執行一次throttle函數。
代碼示例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>節流</title> </head> <body><button id="throttle">點我節流！</button><script>window.onload = function() {// 1、獲取按鈕，綁定點擊事件var myThrottle = document.getElementById("throttle");myThrottle.addEventListener("click", throttle(sayThrottle));}// 2、節流函數體function throttle(fn) {// 4、通過閉包保存一個標記let canRun = true;return function() {// 5、在函數開頭判斷標志是否為 true，不為 true 則中斷函數if(!canRun) {return;}// 6、將 canRun 設置為 false，防止執行之前再被執行canRun = false;// 7、定時器setTimeout( () => {fn.call(this, arguments);// 8、執行完事件（比如調用完接口）之后，重新將這個標志設置為 truecanRun = true;}, 1000);};}// 3、需要節流的事件function sayThrottle() {console.log("節流成功！");}</script> </body> </html>節流效果
當持續觸發click事件時，事件處理函數throttle只在1000毫秒間隔之后才會調用一次，也就是說在持續觸發click事件的過程中，事件處理函數debounce只會在指定時間間隔內執行一次任務。
總結：
- 防抖：任務頻繁觸發的情況下，只有任務觸發的間隔超過指定間隔的時候，任務才會執行。原理是維護一個計時器，規定在delay時間后觸發函數，但是在delay時間內再次觸發的話，就會取消之前的計時器而重新設置。這樣一來，只有最后一次操作能被觸發。
場景示例：有個輸入框，輸入之后會調用接口，獲取聯想詞。但是，因為頻繁調用接口不太好，所以我們在代碼中使用防抖功能，只有在用戶輸入完畢的一段時間后，才會調用接口，出現聯想詞。
- 節流：任務頻繁觸發的情況下，指定時間間隔內只會執行一次任務。原理是通過判斷是否到達一定時間來觸發函數
場景示例：懶加載要監聽計算滾動條的位置，使用節流按一定時間的頻率獲取
- 區別：?函數節流不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數，而函數防抖只是在最后一次事件后才觸發一次函數。 比如在頁面的無限加載場景下，我們需要用戶在滾動頁面時，每隔一段時間發一次 Ajax 請求，而不是在用戶停下滾動頁面操作時才去請求數據。這樣的場景，就適合用節流技術來實現。
總結
以上是生活随笔為你收集整理的JS中的防抖跟节流(DebounceThrottle)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 文言文能编程了，是噱头还是突破？
- 下一篇： NYOJ 171 聪明的kk