防抖與節流

• 防抖與節流
  • 1. 防抖
  • 2. 節流

• 在進行視窗操作或者輸入框操作時，如果事件處理函式觸發頻率過高，會加重瀏覽器和伺服器的負擔。此時可以使用防抖和節流的方式來減少呼叫頻率，同時又不影響實際效果。
• 防抖與節流是一個寬泛的概念，不僅僅侷限於JS，許多語言/框架都可以使用，此篇筆記以JS為例演示效果

1. 防抖

• 定義：單位時間內，頻繁觸發一個事件，以最後一次觸發為準

• 實現原理：設定一個延時器(setTimeout)，如果在指定時間內收到多次請求，則每次受到請求都會清除上一次請求的定時器，重新開始計時。即，在指定時間內使用者無論提交多少次，只有最後一次能觸發成功

• 示例程式碼

  let timeID = null
  document.querySelector('input').oninput = function () {
  	//1.清除之前的定時器
  	clearTimeout(timeID)
  	//2.開啟本次定時器
  	timeID = setTimeout(() => {
  		console.log(`傳送ajax,搜尋的內容是${this.value}`)
  	}, 500)
  }
  

2. 節流

• 定義：單位時間內，頻繁觸發一個事件，最終只會觸發一次

• 實現原理：設定狀態鎖(key)，key初始值為false。當點選/輸入時，對key進行判斷，如果key未上鎖（false），那麼開始發起請求，並且給key上鎖（true）。如果你此時繼續點選，對key進行判斷時，發現key上鎖了，則不發起請求，點選無效。當請求完成後，再次key設定為false，則可以嘗試傳送新一輪請求。

• 示例程式碼

  //宣告一個全域性變數儲存觸發時間
  let lastTime = null
  //頁面滾動事件
  window.onscroll = function () {
  	//1.每一次觸發 先獲取本次時間戳
  	let currentTime = Date.now()
  	//2.判斷當前時間 與 上次觸發時間 是否超過間隔
  	if (currentTime - lastTime >= 500) {
  		console.log(document.documentElement.scrollTop)//獲取滾動距離
  		//3.儲存本次的觸發時間
  		lastTime = currentTime
  	}
  }
  

• 防抖和節流的區別

  • 防抖是將多次執行變為最後一次執行，函式防抖對於連續觸發的事件，只在最後執行一次
  • 節流是將多次執行變成每隔一段事件執行，函式節流一段時間內只執行一次。