優化高頻率執行js**的一種手段，js中的一些事件如瀏覽器的resize、scroll，滑鼠的mousemove、mouseover，input輸入框的keypress等事件在觸發時，會不斷地呼叫繫結在事件上的**函式，極大地浪費資源，降低前端效能。為了優化體驗，需要對這類事件進行呼叫次數的限制。
html一樣比較簡單：
<input
type
="text"
>
在事件被觸發delay秒後再執行**，如果在這n秒內又被觸發，則重新計時。--->直白：比如click事件，在規定時間內只能執行一次，若多次點選，只執行最後一次；
var input = document.getelementsbytagname('input')[0];
input.onchange = debounce(function
(e) , 2000)
//防抖debounce
function
debounce(fn, delay) , delay)
}}
以上**就是函式防抖，如果直接執行input的onchange事件只要點選回車，就會輸出；使用debounce降低了降低**執行頻率。節省計算資源。這樣在2000內執行一次，若重複點選，這重新計算；
注意問題：
①timer的作用域，這裡使用**是為了強調timer的作用域；
每隔一段時間，只執行一次函式。---》直白：比如click事件，在規定時間內，就執行一次，其他的點選都是無效的。
解決方法一：定時器節流。
①：利用乙個開關switcht控制點選事件，在用一次性定時器在delay內再恢復
var input = document.getelementsbytagname('input')[0];
input.onchange = throttles(function
(e) , 2000)
//節流throttles
function
throttles(fn, delay) , delay)
fn(this
) }
}
②：通過時間戳延時
//節流throttles
function
throttles(fn, delay) , delay)
}}
解決方法二：時間戳節流。使用時間來控制，當前時間與之前的時間間隔超過了delay，就可以再次執行
var input = document.getelementsbytagname('input')[0];
input.onchange = throttles(function
(e) , 2000)
//節流throttles
function
throttles(fn, delay)
}
函式防抖的應用場景
連續的事件，只需觸發一次**的場景有：
函式節流的應用場景
間隔一段時間執行一次**的場景有：
參考文章：
此文章是自己的乙個筆記總結，如若有不對的地方或者需要補充的地方，還望提出，謝謝！
抖動與節流
當我們頻繁觸發同乙個事件，如 改變視窗大小 上下滾動滾動條 反覆向輸入框中輸入內容，就會頻繁的向後台傳送請求。直到任務完成時，之前的請求都是多餘的，嚴重影響使用者體驗和伺服器的效能。這種問題就叫抖動 可以在一定時間內監聽是否再次輸入，如果沒有再次輸入則認為本次輸入完成，傳送請求，否則就是判定使用者仍...
前端的抖動與節流
首先 下面 原理 不斷地觸發事件，但是停下來後，只執行一次。即觸發n次function，但只執行最後的一次function。使用場景 滾動 滑鼠移動 window resize 防抖動事件 鍵盤事件keydown keyup 主體 var timer null function debounce f...
js 函式節流 與 防抖動
函式節流 就如同成都搖號買房，前乙個進去選房了，下乙個就要等一段時間。這種策略就很好的解決了，一大波人進去選房，銷售妹妹沒發接待的尷尬局面。應用場景 監聽瀏覽器滾動條，然後觸發函式。普通做法 document.getelementbyid throttle onscroll function 函式節...