函式節流與函式防抖都是為了限制函式的執行次數，以優化函式觸發頻率過高導致的響應速度跟不上觸發頻率，出現延遲、假死或卡頓的現象。
函式節流
當持續觸發事件時，每隔一段時間函式就觸發一次，不管在這段時間內，觸發了多少次事件，在這段之間內就只觸發一次。舉個例子，input框中輸入內容，觸發keyup事件，通過ajax請求，將文字傳給後端。如果使用者一直輸入文字，持續了6秒，我們設定的時間是3秒，那麼就執行了2次ajax請求，不管中間使用者觸發了多少次keyup事件。
那我們來看一下**：
var flag =
true
;//假設btn是提交按鈕
btn.
onclick
=function
throttling()
,1000);
};
滑鼠連續不斷的觸發某個事件，在單位時間內只觸發一次
監聽滾動事件，比如是否滑到底部自動載入更多，用throttle來判斷。
在頁面的無限載入下，需要使用者在滾動頁面時，每隔一段時間傳送一次ajax請求，而不是使用者在停下頁面滾動的時候，再去請求。
函式防抖
var timer;
//設定定時器
var search;
//假設為輸入內容
search.
oninput
=function
debounce()
timer =
settimeout
(function()
,1000
)}
js防抖與節流以及應用場景
在前端開發中會遇到一些頻繁的事件觸發，例如input，keyup，keydown，scroll，resize，mousemove等，這非常影響效能，所以我們需要控制它們觸發的頻率，方法就是防抖與節流。debounce function debounce func,wait wait 如果直接使用un...
防抖和節流 應用場景及實現
概念 假定時間間隔為200ms，如果觸發事件後的200ms內再次觸發事件，則重新等待200ms，否則將成功執行指定函式。應用場景 資料查詢 監控使用者輸入 實現 function search t settimeout 2000 var test1 document.getelementbyid t...
函式節流和防抖 以及使用場景
二 防抖 定時器版 推薦 小結節流和防抖是前端工作中使用頻率很高的技巧，合理使用可以提高前端效能，減輕伺服器壓力。我們通過輸入框來觀察時間觸發頻率以及觸發時獲取到的值。lang en charset utf 8 name viewport content width device width,ini...