我們前端在開發過程經常用到 scroll 、resize等高頻的事件，特別在監測瀏覽器變化以及在下拉載入大資料的過程中，當這些高頻的事件發生時，這些高頻的事件觸發的頻次非常高，也非常大的多，間隔的時間也很短。如果這些高頻的事件中要及到大量的位置計算、dom 操作、ui重繪等等業務，但是偏偏業務計算和操作無法在下乙個 高頻的事件觸發之前前完成，往往會造成嚴重的結果，這個節結果叫瀏覽器掉幀。持續觸發高頻的事件往往會導致掉幀擴大、瀏覽器 cpu 使用率飆公升、使用者體驗受到影響、瀏覽器崩潰。如果這個高頻的時間在涉及到後端介面的互動中，而前端依賴於這個高頻事件如resize，scroll等，來觸發和傳送相應的http請求，在這個整個實現的過程中，我們如果不做防抖處理，那麼在這個高頻的事件觸發的一瞬間，就會有發出無數個請求給後端，而後端在處理這些請求增加了很多沒有必要的壓力，更有甚者造成伺服器宕機。
概念
什麼是函式節流比如我舉個生活中常見的列子，有個人去拿乙個空桶取打水，但是這個比較珍惜時間，不想把時間浪費在打水的過程中，於是他就把水桶放在水龍頭下面，但是要把水龍頭全部開啟 ，打滿水需要5分鐘，可是中途辦事情需要10分鐘，可是如果全開，再去辦事情，回來之後，會有很多水浪費掉，於是，就把水龍頭開啟一半，然後去辦事情，正好回來，水桶剛好滿，也減少浪費，也充分利用時間和資源。而從全部開啟到開啟一半，這個就是節流，節流用大白話說就是讓它流動的慢些。
什麼是函式去抖節流和去抖區別最早接觸這個詞應該是在高中物理裡面學到的，有時候開關在在真正閉合之前可能會發生一些抖動現象，如果抖動的明顯的話，對應的小燈泡可能會閃爍，把燈泡閃壞了不重要，萬一把眼睛再給閃壞了可就麻煩了，這個時候就有去抖電路的出現。而在我們的頁面裡會有這樣的乙個業務，頁面中有乙個輸入框，我們根據輸入框裡輸入內容同時可能會去掉用http介面去查詢對應的資料，如果這個使用者輸入的同時，頻繁的觸發input事件，然後頻繁的向後台傳送請求，那麼直到使用者輸入完成時，之前的請求都應該是多餘的，假設網路慢一點，後台返回的資料比較慢，那麼顯示的資料可能會出現頻繁的變換，直到最後的乙個請求返回。
防抖動是將多次執行變為最後一次執行，節流是將多次執行變成每隔一段時間執行。
適用場景
window物件的resize事件
window物件的scroll事件
拖拽時的mousemove事件
滑鼠的滾動，按下，彈出等事件
文字輸入、自動完成的keyup事件
…等等
引用節流和不引用對比
不使用節流
使用節流節流的寫法
function
throttle
(fn, delay =
14, mustrundelay =14)
if(now - timestamp >= mustrundelay)
else
, delay)}}
}
demo
總結是不是效果很明顯。結果顯而易見，在大資料情況下或者其他業務無疑是最好的實現。趕緊把這個功能收藏，或者加入你的專案中吧。
引用函式去抖動和不引用對比
不使用函式去抖動
使用函式去抖動函式去抖動的寫法
function
debounce
(fn, wait)
}
demo
總結是不是效果很明顯。結果顯而易見，在大資料情況下或者其他業務無疑是最好的實現。趕緊把這個功能收藏，或者加入你的專案中吧。（非同步處理非常明顯）
深入理解JS函式節流和去抖動
節流就是擰緊水龍頭讓水少流一點，但是不是不讓水流了。想象一下在現實生活中有時候我們需要接一桶水，接水的同時不想一直站在那等著，可能要離開一會去幹一點別的事請，讓水差不多流滿一桶水的時候再回來，這個時候，不能把水龍頭開的太大，不然還沒回來水就已經滿了，浪費了好多水，這時候就需要節流，讓自己回來的時候水...
js 函式節流 與 防抖動
函式節流 就如同成都搖號買房，前乙個進去選房了，下乙個就要等一段時間。這種策略就很好的解決了，一大波人進去選房，銷售妹妹沒發接待的尷尬局面。應用場景 監聽瀏覽器滾動條，然後觸發函式。普通做法 document.getelementbyid throttle onscroll function 函式節...
JS 函式節流和去抖
1 什麼是節流和去抖？節流。就是擰緊水龍頭讓水少流一點，但是不是不讓水流了。想象一下在現實生活中有時候我們需要接一桶水，接水的同時不想一直站在那等著，可能要離開一會去幹一點別的事請，讓水差不多流滿一桶水的時候再回來，這個時候，不能把水龍頭開的太大，不然還沒回來水就已經滿了，浪費了好多水，這時候就需要...