溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JavaScript如何實現防抖與節流

發布時間:2022-03-31 12:35:42 來源:億速云 閱讀:218 作者:小新 欄目:開發技術

這篇文章主要介紹了JavaScript如何實現防抖與節流,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

概念

防抖:點擊N次提交按鈕,只有最后一次會發出請求。減少無效請求的次數。

節流:每點擊一次按鈕,都會失效一段時間。降低觸發的頻率。

實現

/*
防抖
時限內,只有最后一次調用會執行
*/
function debounce(func, interval = 0) {
	let timer;
	return function () {
		if (timer) {
			clearTimeout(timer);
		}
		timer = setTimeout(() => {
			func()
		}, interval)
	}
}
/*
節流
執行之后會失效一段時間
*/
function throttle(fn, interval=0, immediate=true) {
	let valid = true
	return function () {
		if (!valid) {
			return
		}
		valid = false
		if (immediate) {
			fn()
			setTimeout(() => {
				valid = true;
			}, interval)
		} else {
			setTimeout(() => {
				fn()
				valid = true;
			}, interval)
		}
	}
}

測試

function say() {
	console.log(1)
}
var a = debounce(say, 1000)
var b = throttle(say, 1000)
var c = throttle(say, 1000, false)

<button onclick="a()">測試防抖</button>
<button onclick="b()">測試節流一</button>
<button onclick="c()">測試節流二</button>

效果:

防抖。

JavaScript如何實現防抖與節流

節流,立即執行。

JavaScript如何實現防抖與節流

節流,延時執行。

JavaScript如何實現防抖與節流

注意事項

原理:閉包。每調用一次都會對應一個閉包。

不能夠像下面這樣寫:

<button onclick="debounce(say, 1000)()">測試防抖</button>
<button onclick="throttle(say, 1000)()">測試節流一</button>
<button onclick="throttle(say, 1000, false)()">測試節流二</button>

不然:

JavaScript如何實現防抖與節流

感謝你能夠認真閱讀完這篇文章,希望小編分享的“JavaScript如何實現防抖與節流”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,更多相關知識等著你來學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女