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

概念

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

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

實現(xiàn)

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

效果：

防抖。

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

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

注意事項

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

不能夠像下面這樣寫：

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

不然：