javaScript函数之防抖与节流

函数防抖（Debounce）

构造原因：在实际开发中，有些事件可能触发频率非常高，比如窗口大小调整、鼠标移动等。如果每次都对这些事件进行响应，可能会造成浏览器性能下降，甚至导致页面卡顿。使用函数防抖，我们可以确保这些高频事件只在真正需要的时候被处理，从而提高页面性能。

// 函数防抖的作用：防止短时间内高频繁调用同一接口的方法
// 防抖：设置延时器，短时间高频率触发，只触发最后一次
var timer = null;
var btn = document.getElementById('btn');
btn.onclick = function () {
	clearTimeout(timer)
	timer = setTimeout(() => {
		console.log('1');
	}, 1000)
}
// 以上是通过一个定时器来模拟调用接口的异步操作

原理：在事件被触发n秒后再执行函数，如果在这n秒内又被重新触发，则重新计算执行时间。这样可以确保一个函数在一定时间内只执行一次，如果这个函数持续被触发，那么它的执行时间将会被不断的推迟。

函数节流（Throttle）

构造原因：和函数防抖类似，函数节流也是为了处理高频触发的事件。与防抖不同的是，节流保证的是在一段时间内事件至少会被处理一次，而不是像防抖那样可能永远不会被处理。这在一些需要定期更新数据或执行操作的场景中非常有用，比如实时搜索、滚动加载等。

// 节流：设置状态锁，短时间高频率触发只有第一次触发成功
var key = false;
btn.onclick = function () {
	if (!key) {
		key = true;
		setTimeout(() => {
			console.log('1');
			key = false;
		}, 1000);
	}
}

原理：如果持续触发事件，每n秒只会执行一次函数。这意味着函数会在每n秒的间隔内执行一次，无论在这n秒内事件被触发了多少次。

总结

函数防抖和节流都是优化高频触发事件的技术，它们的主要区别在于处理事件的方式。防抖侧重于在事件触发后的一段时间内只执行一次函数，而节流则保证在一段时间内事件至少会被处理一次。根据具体的应用场景和需求，我们可以选择使用防抖还是节流来优化我们的代码。