防抖和节流

1. 基本概念

防抖（Debounce）和节流（Throttle）都是用于限制函数执行频率的技术，常用于优化性能、减少资源消耗和提升用户体验。

防抖的原理是在触发事件后，等待一段时间（例如100毫秒），如果在这段时间内没有再次触发该事件，才执行相应的操作。如果在等待时间内又触发了该事件，则重新计时。防抖常用于处理频繁触发的事件，如窗口调整、搜索框输入等。

节流的原理是规定一个固定的时间间隔，在该时间间隔内只会执行一次相应的操作。如果在时间间隔内触发了多次事件，只有第一次会执行操作，其余的事件会被忽略。节流常用于限制高频率触发的事件，如滚动事件、鼠标移动事件等。

意思和明确

1. 防抖定时执行或者需要开关开始执行，但是有一个前提条件，就是需要某个标志没有执行一段时间
2. 节流，就是我不管这些，我只认时间，到时间我就执行。

这就是防抖和节流的概念。

2. 实现方式

防抖

1
2
3
4
5
6
7
8
9
10

let t = settimeout(function() {
	//todo
}, 100);

function execEvent() {
	clearTimeout(t);
	t = settimeout(function() {
		//todo
	}, 100)
}

这样写他蠢，用必包实现

1
2
3
4
5
6
7

function debounce(delay, func) {
	let timer;
	return function() {
		clearTimeout(timer);
		timer = setTimeout(func, delay);
	}
}

然后外部调用就可以了。

同样，需要直接判断时间，也使用必包去做

1
2
3
4
5
6
7
8
9

function throttle(func, interval) {
	let lastTime = 0
	return function() {
		if(new Date() - lastTime > interval) {
			lastTime = new Date();
			func();
		}
	}
}

大概是这样，可以写的更复杂一点，比如时间处理，比如这里也没有处理this指向，也没有处理参数，这样的简单也说清楚了。

3. 应用场景

防抖

输入框搜索：在用户连续输入搜索关键词时，使用防抖可以避免频繁发送请求，只在用户输入完成后一段时间内执行搜索操作。
窗口调整：在窗口大小调整过程中，使用防抖可以确保只在用户完成调整后执行相应的操作，避免频繁触发和执行操作。
按钮点击：防止用户在短时间内多次点击按钮，使用防抖可以确保只响应最后一次点击。

节流

页面滚动：在滚动事件触发时，使用节流可以控制处理函数的执行频率，减少滚动事件的处理次数，提升性能。
鼠标移动：在鼠标移动事件触发时，使用节流可以限制事件处理函数的执行频率，减少频繁的计算和操作，提高页面响应速度。
页面刷新：在页面刷新时，使用节流可以限制资源加载和渲染的频率，避免一次性加载过多的资源导致页面卡顿。

等等等等。

4. 总结

其实再开头就说明了

防抖（Debounce）和节流（Throttle）都是用于限制函数执行频率的技术，常用于优化性能、减少资源消耗和提升用户体验。

所以当遇见可能会频繁触发的时候，就可以考虑使用。

可以直接使用 loadsh 中的方法，处理的很好，简单些可能出现一些不满足的问题，比如参数，比如异步执行调用和执行完成是不一样的，有很多细节需要处理。