JS 中的节流与防抖

JS 截流和防抖都是为了避免频繁触发函数而设计的。其中截流主要用于减少请求发送的频率，防抖主要用于延迟执行并取消前一次的操作。

什么是 JS 截流？

JS 截流（throttling）是指在一段时间内只执行一次回调函数，而忽略其他重复的事件或函数调用。例如，在滑动窗口时，如果每 1 毫秒都去获取数据，那系统很容易崩溃。因此，可以设置一个时间间隔使其每隔一定时间才去获取数据。

实现 JS 截流

以下是使用 JavaScript 实现截流的示例代码：

1
2
3
4
5
6
7
8
9
10
function throttle(func, wait) {
	let lastTime = 0;
	return function () {
		const nowTime = new Date().getTime();
		if (nowTime - lastTime > wait) {
			func.apply(this, arguments);
			lastTime = nowTime;
		}
	};
}

其中，func是被节流的函数，wait是时间间隔。通过比较当前时间与上一次调用的时间，来判断是否需要执行函数。

什么是 JS 防抖？

JS 防抖（debouncing）是指在一定的时间间隔内，只执行最后一次触发函数的回调函数操作。例如，当用户频繁点击提交按钮时，可以在最后一次点击之后才将数据上传至服务器，从而避免无意义的网络请求。

实现 JS 防抖

以下是使用 JavaScript 实现防抖的示例代码：

1
2
3
4
5
6
7
8
9
10
function debounce(func, delay) {
	let timer = null;
	return function () {
		const args = arguments;
		clearTimeout(timer);
		timer = setTimeout(() => {
			func.apply(this, args);
		}, delay);
	};
}

其中，func是被防抖的函数，delay是时间间隔。通过设置定时器，在一定时间内没有新的函数调用时，才执行回调函数。

截流和防抖的选择

在实际开发中，如何选择使用截流还是防抖呢？一般来说：

  • 如果用户连续频繁地触发一个事件，那么就应该使用防抖。
  • 如果多次触发事件只需要执行一次回调函数，那就应该使用截流。

综上所述，JS 截流和防抖都可以有效地限制函数调用的频率，并提高页面性能。在实际开发中，可以根据需求进行选择和使用。