JavaScript如何實(shí)現(xiàn)防抖與節(jié)流

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

概念

防抖：點(diǎn)擊N次提交按鈕，只有最后一次會(huì)發(fā)出請(qǐng)求。減少無效請(qǐng)求的次數(shù)。

節(jié)流：每點(diǎn)擊一次按鈕，都會(huì)失效一段時(shí)間。降低觸發(fā)的頻率。

實(shí)現(xiàn)

/*
防抖
時(shí)限內(nèi)，只有最后一次調(diào)用會(huì)執(zhí)行
*/
function debounce(func, interval = 0) {
	let timer;
	return function () {
		if (timer) {
			clearTimeout(timer);
		}
		timer = setTimeout(() => {
			func()
		}, interval)
	}
}
/*
節(jié)流
執(zhí)行之后會(huì)失效一段時(shí)間
*/
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)
		}
	}
}

測(cè)試

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

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

效果：

防抖。

節(jié)流，立即執(zhí)行。

節(jié)流，延時(shí)執(zhí)行。

注意事項(xiàng)

原理：閉包。每調(diào)用一次都會(huì)對(duì)應(yīng)一個(gè)閉包。

不能夠像下面這樣寫：

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

不然：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JavaScript如何實(shí)現(xiàn)防抖與節(jié)流”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!