js 的防抖與節流

在進行視窗的resize、scroll，輸入框內容校驗等操作時，如果事件處理函式呼叫的頻率無限制，會加重瀏覽器的負擔，導致使用者體驗非常糟糕。

此時我們可以採用debounce（防抖）和throttle（節流）的方式來減少呼叫頻率，同時又不影響實際效果。

函式防抖（debounce）：當持續觸發事件時，一定時間段內沒有再觸發事件，事件處理函式才會執行一次，如果設定的時間到來之前，又一次觸發了事件，就重新開始延時。

如下，持續觸發scroll事件時，並不執行handle函式，當1000毫秒內沒有觸發scroll事件時，才會延時觸發scroll事件。

1

function debounce(fn, wait) 7}
8//處理函式
9function handle() 
12//
滾動事件
13 window.addeventlistener('
scroll
', debounce(handle, 1000));

下面這種寫法會更好理解一點

1

varresizetimer;
2 window.onresize =function() , 500
);7 };

函式節流（throttle）：當持續觸發事件時，保證一定時間段內只呼叫一次事件處理函式。

節流通俗解釋就比如我們水龍頭放水，閥門一開啟，水嘩嘩的往下流，秉著勤儉節約的優良傳統美德，我們要把水龍頭關小點，最好是如我們心意按照一定規律在某個時間間隔內一滴一滴的往下滴。

如下，持續觸發scroll事件時，並不立即執行handle函式，每隔1000毫秒才會執行一次handle函式。

1

var throttle =function(func, delay) 
11} 
12} 
13function handle() 
16 window.addeventlistener('
scroll
', throttle(handle, 1000));

總結

js防抖與節流

在效能上，防抖和節流還是很重要的，處理不當或者放任不管就容易引起瀏覽器卡死。我們開發頁面經常會遇到乙個返回頂部的功能。這個按鈕只會在滾動到距離頂部一定位置之後才出現 問題 mounted methods else 效果圖 在執行的時候會發現存在乙個問題 這個函式的預設執行頻率，太！高！了！然而實際上...

js節流與防抖

函式防抖 debounce 觸發高頻事件後n秒內函式只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間。函式節流 throttle 高頻事件觸發，但在n秒內只會執行一次，所以節流會稀釋函式的執行頻率。函式節流 throttle 與 函式防抖 debounce 都是為了限制函式的執行頻次，以優...

js節流防抖

什麼是節流防抖？在學習這個問題前，我們先丟擲問題 假設我現在有這麼乙個需求 根據input框輸入內容列印到控制台這個問題簡單啊，很簡單的功能嘛，如下 text id input let input document.getelementbyid input input.addeventlistene...