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

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

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

防抖debounce

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

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

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

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

常見寫法：

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

節(jié)流throttle

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

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

如搜索框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)
    }
  }
}

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！

您可能感興趣的文章:

相關(guān)文章

JS?try?catch基本用法以及常見的異常處理
JS異常處理的作用是幫助開發(fā)者識別和處理運(yùn)行時的錯誤和異常情況,確保程序在出現(xiàn)問題時能夠優(yōu)雅地降級或恢復(fù),而不是導(dǎo)致整個應(yīng)用崩潰或產(chǎn)生不可預(yù)測的行為,這篇文章主要介紹了JS?try?catch基本用法以及常見的異常處理,需要的朋友可以參考下
2025-04-04
淺談js在html中的加載執(zhí)行順序,多個jquery ready執(zhí)行順序
下面小編就為大家?guī)硪黄獪\談js在html中的加載執(zhí)行順序,多個jquery ready執(zhí)行順序。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
原生js寫的放大鏡效果
在淘寶上購物時，總會看到類似放大鏡的效果。以下為原生js寫的一個放大鏡效果，其中肯定有很多不足，請大牛們指正，謝啦
2012-08-08
js open() 與showModalDialog()方法使用介紹
項目開發(fā)中經(jīng)常要用到j(luò)s open() 與showModalDialog()方法，下面有個不錯的示例，喜歡的朋友可以研究下
2013-09-09
js?實現(xiàn)div拖拽拉伸完整示例
這篇文章主要為大家介紹了js?實現(xiàn)div拖拽拉伸完整示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
微信小程序返回上一級頁面的實現(xiàn)代碼
這篇文章主要介紹了微信小程序返回上一級頁面的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-06-06
js+FSO遍歷文件夾下文件并顯示
js+FSO遍歷文件夾下文件并顯示...
2007-03-03
JavaScript閉包詳解
一分鐘理解JavaScript閉包，關(guān)于JavaScript閉包的內(nèi)容介紹了很多，本文帶著大家快速理解什么是JavaScript閉包，感興趣的小伙伴們可以參考一下
2021-10-10
解決layui中table異步數(shù)據(jù)請求不支持自定義返回數(shù)據(jù)格式的問題
今天小編就為大家分享一篇解決layui中table異步數(shù)據(jù)請求不支持自定義返回數(shù)據(jù)格式的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
clipboard.js在移動端復(fù)制失敗的解決方法
最近在使用clipboard.js碰到的一個小問題，通過查找相關(guān)資料解決了，所以下面這篇文章主要給大家介紹了關(guān)于clipboard.js在移動端復(fù)制失敗的解決方法，需要的朋友可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)吧
2018-06-06