防抖和節(jié)流嚴(yán)格算起來(lái)應(yīng)該屬于性能優(yōu)化的知識(shí),但實(shí)際上遇到的頻率相當(dāng)高,處理不當(dāng)或者放任不管就容易引起瀏覽器卡死,下面這篇文章主要給大家介紹了關(guān)于JavaScript防抖與節(jié)流的實(shí)現(xiàn)與注意事項(xiàng),需要的朋友可以參考下

概念

防抖：點(diǎn)擊N次提交按鈕，只有最后一次會(huì)發(fā)出請(qǐng)求。減少無(wú)效請(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>

不然：

總結(jié)

到此這篇關(guān)于JavaScript防抖與節(jié)流的實(shí)現(xiàn)與注意事項(xiàng)的文章就介紹到這了,更多相關(guān)JS防抖與節(jié)流內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: