防抖和节流

前言

记录一下最近的问题，以便复习使用。

---

一、关于防抖和节流

防抖和节流是前端开发中常见的而且很有用的限制函数的执行次数的方法，也是面试的高频考点。

1.防抖

一般来说，高频的函数可能产生一些负面影响，比如多次发送Ajax请求可能导致服务器压力过大。防抖可以通过设置setTimeout的方式，在一段时间里把多次请求或者其他方法控制到只触发一次，确保只有最后一次才会生效。可以再在回调函数中把定时器timer用clearTimeout清除，防止上一次的定时器对结果造成影响，然后重新设置定时器，就可以让方法在指定的延迟之后再执行。
代码如下（示例）：

// 防抖:传入一个回调函数，用于执行自己需要的操作，然后再传入一个延迟事件，用于控制定时器。
			let debounce = (fn, delay) => {
				// 记录上一次的延时器:
				let timer = null;
				return () => {
					clearTimeout(timer) //去除延时器；
					// 重新设置延时器:
					timer = setTimeout(() => {
						fn.call(this);
					}, delay)
				}
			}

然后我们在一个按钮点击的案例中应用一下:

<button class="btn">点击</button>

let btn = document.querySelector('.btn');
btn.addEventListener('click', debounce(() => {
	console.log('点击')
}, 2000))

执行的结果为

2秒后:
这样在点击的2秒内不会触发多次事件，达到了防抖的效果。
一般的防抖函数的应用场景可以是

scroll滚动事件触发。

表单验证

Ajax的请求

等等。

2.节流

节流的原理和防抖很类似，就是一个函数执行一次之后，只有大于设定的执行周期之后才会执行第二次，有个需要频繁触发的函数，出于优化性能的角度，在规定的时间内，只让函数触发一次，后面的不生效；
节流函数需要两个参数，一个是执行任务的函数，另一个是延迟时间，函数里面同样需要返回一个函数让对象有可以执行的内容，现在知道要设置一个时间间隔，常用的就是setTimeout由于这个时间间隔是要给后面的任务来判断是否执行的标识，节流的核心即为判断触发的事件是否在时间间隔之内，要是在时间间隔之内，就不触发事件，不在时间间隔之内就触发事件。

// 节流:
			let throttle = (fn, delay) => {
				// 记录上一次函数的出发时间:
				let lastTime = 0;
				return () => {
					// 记录当前函数触发的时间:
					let nowTime = Date.now();
					if (nowTime - lastTime > delay) {
						fn.call(this);
						// 同步时间:
						lastTime = nowTime;
					}
				}
			}

以屏幕的scroll事件为例：

<style>
	html,
	body {
		height: 500%;
		background-color: blue;
	}
</style>

document.onscroll = throttle(() => {
	alert("触发", Date.now());
}, 5000)

执行结果：
刷新完之后做一次滚动：
在指定的时间段内再做滚动则无法触发：
那么节流有哪些应用场景？

DOM元素的拖拽

屏幕的滚动

计算鼠标移动的距离

等等。

总结

防抖和节流各有特点，需要根据不同您的场景选择应用的方法，这也是面试的必考点。实现的方法也不唯一。欢迎小伙伴们一起交流学习。