JavaScript防抖與節流如何定義使用

本文小編為大家詳細介紹“JavaScript防抖與節流如何定義使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“JavaScript防抖與節流如何定義使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

防抖debounce

定義：對于短時間內連續觸發的事件，比如滾動事件，防抖就是讓某個時間期限內，事件處理函數只執行一次。

關于防抖，拿手指按壓彈簧舉例，用手指按壓彈簧，一直按住，彈簧將不會彈起直到松開手指。

舉例resize:

function debounce(fn, wait){
    var timer = null;
    return ()=>{
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(fn, wait);
    }
}
function handle(){
    console.log(Math.random());
}
window.addEventListener("resize",debounce(handle, 1000));

上面是非立即執行版

立即執行版

function debounce(fn, wait){
	let timeid, flag = true;
	return () => {
		clearTimeout(timeid);
		if(flag){
			fn();
			flag = false;
		}else{
			timeid = setTimeout(()=>{
				flag = true;
			}, wait);
		}
	}
}

拖動瀏覽器窗口，觸發resize，此時并不觸發handle函數，定時器計時，在計時時間內再次觸發resize的話，則會從新計時，這樣做的好處就是拖動瀏覽器窗口觸發resize，并不會頻繁執行handle函數，只讓其在需要執行的時候去運行，有效的去除了冗余。

常見寫法：

const debounce = (func, delay = 200) => {
  let timeout = null
  return function () {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      func.apply(this, arguments)
    }, delay)
  }
}

節流throttle

定義：讓事件在一定時間內只執行一次。

本意是像水龍頭的水滴一樣，規定時間內只執行一次，減少頻繁反復執行。

如搜索框input事件。

通過時間戳計算：

function throttle(fn,wait){
  let startTime = 0;
  return function(){
    let endTime = Date.now();
    if(endTime-startTime>wait){
      fn();
      startTime = endTime;
    }
  }
}

通過定時器：

function throttle(fn,wait){
  let timeid = null;
  return function(){
    if(!timeid){
       timeid = setTimeout(function(){
         fn();
         timeid = null;
       },wait)
    }
  }
}

讀到這里，這篇“JavaScript防抖與節流如何定義使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。