理解一下js的防抖

先来个基础版开开胃，设置定时器，再次触发时如果有就清除，通俗易懂

function debounce(callback, timeout = 1000) {
	let shakeTimer = null;
	return (...arg) => {
		if (shakeTimer) {
			clearTimeout(shakeTimer);
		}
		shakeTimer = setTimeout(() => {
			callback.call(this, ...arg)
		}, timeout);
	};
}

如果想要第一次触发debounce时就立即执行一次callback怎么办？
好办，当shakeTimer为null的时候立即执行就好了呗~看我们的进化版

function debounce(callback, timeout = 1000) {
	let shakeTimer = null;
	return (...arg) => {
		if (shakeTimer) {
			clearTimeout(shakeTimer);
		} else {
			callback.call(this, ...arg);
		}
		shakeTimer = setTimeout(() => {
			callback.call(this, ...arg)
		}, timeout);
	};
}

这时就会有另一个问题，不知道你们看出来了没有？那就是，只有第一次触发debounce的时候才能立刻执行callback，如果shakeTimer结束后再次触发debounce呢？是不是就没法立即执行了？很多人也都能想到了方法了，那就是在shakeTimer执行成功的时候吧shakeTimer置为null就行了呗~

//...
shakeTimer = setTimeout(() => {
	callback.call(this, ...arg);
	shakeTimer = null;
}, timeout);
//...

如果延迟执行shakeTimer执行结束后，立马就有出发了一次防抖，那么就会被当做第一次触发，而导致很快就又执行一次callback，这就不是我们想要的防抖了，所以要给延迟触发时修改的shakeTimer=null那里也加一个定时器，在timeout毫秒之后再将它置为null。

//......
shakeTimer = setTimeout(() => {
	callback.call(this, ...arg)
	setTimeout(() => {
		shakeTimer = null;
	}, timeout);
}, timeout);
//....

如果多次触发了debounce，并都成功到达了shakeTimer，那么会在后台跑很多个清空shakeTimer的方法，导致某个时间点shakeTimer是会出错的（也就是执行的时候shakeTimer刚好为null，结果本来应该需要中止上次操作的，结果变成立刻执行了），所以要在初始化shakeTimer的时候把successTimer也清空了。防抖超级进化----->变身！！

/**
 * 防抖
 * @param {function} callback 需要执行的函数
 * @param {number} timeout 防抖的时间
 * 
 * 1. 最基础版，设置定时器，如果有就清除
 * 2. 如果没有定时器，就直接执行，不用等待
 * 3. 代码执行后，需要将定时器清空，以便于再次出发时可以立即执行
 * 4. 基于3，如果延迟执行shakeTimer执行结束后，立马就有出发了一次防抖，那么就会被当做第一次触发，而导致很快就又执行一次callback，这就不是我们想要的防抖了，所以要给延迟触发时修改的shakeTimer=null那里也加一个定时器，在timeout毫秒之后再将它置为null
 * 5. 如果多次触发了这个定时器，那么会在后台跑很多个这个方法，导致某个时间点shakeTimer是会出错的，所以要在初始化shakeTimer的时候把successTimer也清空了。
 */
function debounce(callback, timeout = 1000) {
	let shakeTimer = null;
	let successTimer = null;
	return (...arg) => {
		if (shakeTimer) {
			clearTimeout(shakeTimer);
			clearTimeout(successTimer);
		} else {
			callback.call(this, ...arg);
		}
		shakeTimer = setTimeout(() => {
			callback.call(this, ...arg)
			successTimer=setTimeout(() => {
				shakeTimer = null;
			}, timeout);
		}, timeout);
	};
}

进化完成，可能还会有其他需求，我写的这个方法也不是万能的，具体情况具体分析，可以在基础版上进行更改，祝你们成功写出符合自己项目需求的防抖函数哦~加油！与君共勉！冲鸭！