這篇文章帶給大家的內容是關於JavaScript中去抖與節流的詳細介紹（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
無論是面試或在討論瀏覽器最佳化過程中，都會涉及到去抖動和節流的問題。
總的來說，這二者是一種限制事件觸發頻率的方式。不同的是，節流會指定事件觸發的時間間隔；而去抖動會指定事件不觸發的時間間隔。從結果來看，節流降低了時間處理的敏感度；而去抖對從觸發事件先儲存起來，等到超過指定事件間隔後，一起發送。
越來越暈，直接上程式碼:
HTML
<input type="text" oninput="fatch()">
這裡有一個供用戶搜尋使用的input標籤，有一個input事件會觸發的處理函數fatch ，這個fatch會根據input的value值向後台去請求聯想詞。
上面程式碼思路是沒有問題的，但是如果不做觸發限制的話，可能會產生大量的http請求，而這些請求裡面很多可能意義不大，為我們的優化提供了空間；下面，我就採用節流和去抖兩種思路來解決這個問題。 （一般針對input這種情況，使用去抖解決；這裡只是方便做程式碼說明）
function jieliu (func, time){//func 执行函数， time 时间间隔
let lastRun = null
return function(){
const now = new Date()
if(now - lastRun > time){
func(...arguments)
lastRun = now
}
}
}
const listener = jieliu(function(value){//监听函数，指定间隔时间
console.log(value)
}, 1000)
const input = document.querySelector("input")
//调用方法
input.addEventListener("input", function(event){
listener(event.target.value)
})以上是比較簡單的節流實作以及基本的呼叫方式；使用閉包是為了保存每一次執行的lastRun。基本上實現了限制請求頻率的需求，但忽略了最後一個的觸發。
改進如下：
function jieliu (func, time){// 触发时间间隔>time 发送请求
let lastRun = null
let timeout = undefined
return function(){
const self = this;
const now = new Date()
if(now - lastRun > time){
if(timeout){
clearTimeout(timeout)
timeout = undefined
}
func.apply(self, arguments)
lastRun = now
}
else{
if(!timeout){
timeout = setTimeout(func.apply(self, arguments), time)
}
}
}
}加入timeout，判斷是否是最後一次請求。
function qudou(func, time){
let timeout = undefined
return function(){
const argu = arguments
const self = this
if(timeout){
clearTimeout(timeout)
timeout = undefined
}else{
timeout = setTimeout(func.apply(this, arguments), time)
}
}
}以上簡單實作去抖動，同樣，最後一次事件不能夠觸發處理函數。
改進如下：
function qudou(func, time){//判断连续time时间内不触发，发送func请求
let timeout = undefined;
let lastRun = null
return function(){
const self = this
const now = new Date()
if(now - lastRun > time){
func.apply(self, arguments)
}
else {
if(!timeout){
timeout = setTimeout(func.apply(self, arguments), time)
}
else {
clearTimeout(timeout)
timeout = undefined
}
}
lastRun = new Date()
}
}總結
通篇寫下來，節流主要的實現方式還是透過對比“now”與“lastRun”的時間差，進而減少處理函數的呼叫次數；而防手震還是透過settimeout來延緩處理函數的呼叫時機，進而把多次觸發的結果總結一起呼叫處理函數。
以上是JavaScript中去抖與節流的詳細介紹（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
