概念：函式防抖(debounce)：觸發高頻事件後n秒內函式只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間。
函式節流(throttle)：高頻事件觸發，但在n秒內只會執行一次，所以節流會稀釋函式的執行頻率。
函式節流（throttle）與 函式防抖（debounce）都是為了限制函式的執行頻次，以優化函式觸發頻率過高導致的響應速度跟不上觸發頻率，出現延遲，假死或卡頓的現象。1、函式防抖(debounce)**
實現方式：每次觸發事件時設定乙個延遲呼叫方法，並且取消之前的延時呼叫方法
缺點：如果事件在規定的時間間隔內被不斷的觸發，則呼叫方法會被不斷的延遲**
//防抖debounce**：
function
debounce
(fn,delay)
, delay);}
;}// 處理函式
function
handle()
//滾動事件
window.
addeventlistener
('scroll'
,debounce
(handle,
500)
);
實現方式：每次觸發事件時，如果當前有等待執行的延時函式，則直接return**
//節流throttle**：
function
throttle
(fn,delay)
, delay);}
;}function
sayhi
(e)window.
addeventlistener
('resize'
,throttle
(sayhi,
500)
);
總結：函式防抖：將多次操作合併為一次操作進行。原理是維護乙個計時器，規定在delay時間後觸發函式，但是在delay時間內再次觸發的話，就會取消之前的計時器而重新設定。這樣一來，只有最後一次操作能被觸發。
函式節流：使得一定時間內只觸發一次函式。原理是通過判斷是否有延遲呼叫函式未執行。
區別： 函式節流不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函式，而函式防抖只是在最後一次事件後才觸發一次函式。比如在頁面的無限載入場景下，我們需要使用者在滾動頁面時，每隔一段時間發一次 ajax
請求，而不是在使用者停下滾動頁面操作時才去請求資料。這樣的場景，就適合用節流技術來實現。
函式防抖 函式節流
函式節流 乙個函式執行一次後，只有大於設定的執行週期後才會執行第二次。有個需要頻繁觸發的函式，出於優化效能的角度，在規定時間內，只讓函式觸發的第一次生效，後面不生效。節流函式 function throttle fn,delay 200 函式防抖 乙個需要頻繁觸發的函式，在規定時間內，只讓最後一次生...
函式防抖，函式節流
防抖原理 在事件被觸發規定的時間後才執行一次，如果在規定的時間內又一次觸發了事件則重新計時。應用場景 1.scroll事件滾動觸發 2.搜尋框輸入查詢 3.瀏覽器視窗縮放，resize事件 防抖實現 function debounce func,wait,bool wait 立即執行,如果calln...
函式防抖，函式節流
我又雙叒叕來撿起一切的老知識了 今天主要回顧的是 作為為數不多的面試中高頻問題且實際工作經常用到的 函式防抖，節流 首先科普一下函式防抖，節流的概念 函式防抖 就是指觸發事件後在 n 秒內函式只能執行一次，如果在 n 秒內又觸發了事件，則會重新計算函式執行時間。函式節流 限制乙個函式在一定時間內只能...