Js函数节流

函数节流（throttle）‌是指限制一个函数在一定时间内只能执行一次。这种技术常用于处理一些容易被多次触发的事件，如oninput输入事件、window.onscroll窗口滚动事件等。如果不限制这些事件的执行频率，可能会导致函数多次执行，浪费计算机资源，甚至可能导致浏览器卡死或崩溃。

代码如下：

function throttle(func, wait, type) {
	if (type === 1) {
		let previous = 0;
	} else if (type === 2) {
		let timeout;
	}
	return function() {
		let context = this;
		let args = arguments;
		if (type === 1) {
			let now = Date.now();
			if (now - previous > wait) {
				func.apply(context, args);
				previous = now;
			}
		} else if (type === 2) {
			if (!timeout) {
				timeout = setTimeout(() => {
					timeout = null;
					func.apply(context, args)
				}, wait)
			}
		}
	}
};

参数说明：func 函数，wait 延迟执行毫秒数，type：1 表时间戳版， 2 表定时器版

函数节流的原理：

函数节流的原理主要是通过控制事件间隔来实现。有两种主要的实现方式：

1、使用定时器（开关方法）‌：设置一个定时器，当函数被触发时，定时器延迟执行函数。在定时器执行期间，即使函数再次被触发，也不会重新设置定时器，直到定时器执行完毕才会重新设置。

2、使用时间戳‌：记录上一次函数执行的时间戳，当函数再次被触发时，计算当前时间与上次执行时间的差值。如果差值大于设定的时间间隔，则执行函数；否则不执行。

函数节流的应用场景：

浏览器滚动事件（scroll）
鼠标事件（mouseup, mousedown, mousemove）
键盘事件（keyup, keydown, input）
窗口大小调整事件（window.resize）

在这些场景中，函数节流可以有效防止函数的频繁调用，提高应用程序的性能和响应速度。

链接: https://fly63.com/course/34_2061