快捷導(dǎo)航

JavaScript防抖與節(jié)流詳解

更新時(shí)間：2021年10月18日 15:59:10 作者：頁(yè)神建輯-思而后學(xué)

這篇文章主要介紹了JS中的防抖與節(jié)流及作用詳解，本文通過文字說明加示例代碼的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

防抖debounce

定義：對(duì)于短時(shí)間內(nèi)連續(xù)觸發(fā)的事件，比如滾動(dòng)事件，防抖就是讓某個(gè)時(shí)間期限內(nèi)，事件處理函數(shù)只執(zhí)行一次。

關(guān)于防抖，拿手指按壓彈簧舉例，用手指按壓彈簧，一直按住，彈簧將不會(huì)彈起直到松開手指。

舉例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));

上面是非立即執(zhí)行版

立即執(zhí)行版

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

拖動(dòng)瀏覽器窗口，觸發(fā)resize，此時(shí)并不觸發(fā)handle函數(shù)，定時(shí)器計(jì)時(shí)，在計(jì)時(shí)時(shí)間內(nèi)再次觸發(fā)resize的話，則會(huì)從新計(jì)時(shí)，這樣做的好處就是拖動(dòng)瀏覽器窗口觸發(fā)resize，并不會(huì)頻繁執(zhí)行handle函數(shù)，只讓其在需要執(zhí)行的時(shí)候去運(yùn)行，有效的去除了冗余。

常見寫法：

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

節(jié)流throttle

定義：讓事件在一定時(shí)間內(nèi)只執(zhí)行一次。

本意是像水龍頭的水滴一樣，規(guī)定時(shí)間內(nèi)只執(zhí)行一次，減少頻繁反復(fù)執(zhí)行。

如搜索框input事件。

通過時(shí)間戳計(jì)算：

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

通過定時(shí)器：

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