JavaScript如何實現防抖與節流

這篇文章主要介紹了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>

效果：

防抖。

節流，立即執行。

節流，延時執行。

注意事項

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

不能夠像下面這樣寫：

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

不然：

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