最简单的防抖、节流实现

节流

描述： 一段时间内频繁触发回调函数，回调函数只执行一次。

应用场景： 表单提交

// 节流
// 时间戳版
function throttle(func, delay) {
	let last = 0;
	return function () {
		const now = Date.now();
		if (now >= last + delay) {
			func.apply(this, arguments);
			last = now;
		} else {
			console.log("不执行");
		}
	};
}
// 定时器版
function throttle2(func, delay) {
	let timer;
	return function () {
		if (!timer) {
                        func.apply(this, arguments);
			timer = setTimeout(() => {
                            timer = null; //记得置空
			}, delay);
		} else {
			console.log("不执行");
		}
	};
}

function test1() {
	console.log(1);
}

window.addEventListener("resize", throttle(test1, 500));
//window.addEventListener("resize", throttle2(test1, 500));

防抖

描述： 一段时间内频繁触发回调函数，只执行最后一次回调函数。

应用场景： 浏览器resize执行Echart示例的resize方法、小程序input输入执行setData方法。

// 防抖
function debounce(func, delay) {
	let timer;
	return function () {
		clearTimeout(timer);
		timer = setTimeout(() => {
			func.apply(this, arguments);
		}, delay);
	};
}

function test2() {
	console.log(2);
}

window.addEventListener("scroll", debounce(test2, 500));