JS 防抖与节流的思路与实现

参考视频

防抖

抖动 （和硬件上按键抖动类似）描述的是一种高频事件，但不需要每次都响应
例如：对输入内容的动态提示，要监听oninput 但打字会高频触发这个事件

简单的防抖实现

let t = null;
inp.oninput = function() {
	if (t !== null) {
		clearTimeout(t) // 当用户输入的停顿超过设定的500ms时，延时的任务才会进入任务队列并执行
	}
	t = setTimeout(() => {
		// 延时执行的内容
	}, 500)
}

用闭包封装防抖

function debounce(callback, delay) {
	let t = null;
	return function() {
	if (t !== null) {
		clearTimeout(t) // 当用户输入的停顿超过设定的500ms时，延时的任务才会进入任务队列并执行
	}
	t = setTimeOut(() => {
		// 延时执行的内容
		callback.call(this); // 改变回调的this指向，方便获取事件相关值
	}, delay)
}
}

节流

节流 同样是处理高频事件，要求的是一段时间内仅执行一次
差别：最终响应的事件是第一次触发的

后续的高频事件会被空过，理解成 截流 似乎也挺合理

节流的简单实现

let firstFlag = true
window.onscroll = function () {
	if (firstFlag) {
		setTimeout(() => {
			// 需要执行的响应
			firstFlag = ture; // 执行完响应后，要恢复处理
		}, 500)
	}
	firstFlag = false; // 后续的事件将空过
}

对齐封装

function throttle(callback, delay) {
	let firstFlag = true
	return function () {
		if (firstFlag) {
			setTimeout(() => {
				// 需要执行的响应
				callback.call(this)
				firstFlag = ture; // 执行完响应后，要恢复处理
			}, delay)
		}
		firstFlag = false; // 后续的事件将空过
	}
}