防抖和节流

/**
 * 防抖函数，防抖是确保在指定时间间隔内只执行一次函数，避免多次触发事件导致重复执行
 * 当一个事件被触发时，如果在指定的时间内再次触发该事件，则重新计时，直到指定时间内没有触发事件后才执行函数
 * 例如，当用户连续点击按钮时，使用防抖可以确保只有最后一次点击才会触发函数的执行，避免多次重复操作。
 * 定义一个定时器timer,使用闭包，
 * 一段时间内的第一次点击会生成一个timer，在一段时间后执行fn
 * 此后的点击，如果此时已经有timer,清除timer,重新定义timer。
 * @param {Function} fn 传入的函数
 * @param {Number} delay 延时时间
 */
function debounce(fn, delay = 500) {
	let timer = null;
	return function (...args) {
		if (timer !== null) {
			clearTimeout(timer);
		}
		let that = this;
		timer = setTimeout(() => {
			fn.apply(that, args);
			timer = null; //将timerId设置为null
		}, delay);
	};
}

/**
 * 节流函数，节流是限制函数执行频率，确保在一定时间间隔内只执行一次函数，
 * 当一个事件被触发时，无论事件触发频率多高，只会在指定的时间间隔内执行一次函数。
 * 例如，当用户连续滚动页面时，使用节流可以限制滚动事件的处理频率，避免过多的计算和渲染。
 * 定义一个定时器timer,
 * 第一次触法函数生成一个timer,用于判断当前是否在等待执行完
 * 如果有timer,就跳过
 * 没有timer就重新定义
 * @param {Function} fn 传入的函数
 * @param {Number} delay 延迟时间
 */
function throttle(fn, delay = 500) {
	let timer = null;
	return function (...args) {
		if (timer === null) {
			fn.apply(this, args);
			timer = setTimeout(() => {
				timer = null;
			}, delay);
		}
	};
}