防抖与节流详细讲解

一、前言

在前端的面试中我们经常会听到面试官问到什么是防抖与节流？会需要我们详细的讲解他们各自的用法，以及不同点。

为此特地全面的讲解一下防抖与节流，在加深对二者的理解，同时方便大家参考。首先提出几个问题，希望大家带着问题来看这篇文章：

1. 什么是防抖与节流？
2. 他们之间有什么联系，为什么总是一起问？
3. 他们之间的不同点是什么？
4. 他们各自的使用场景是什么？
5. 如何封装防抖与节流

二、防抖（debounce）

2.1 定义

防抖（debounce），在一段时间内多次执行相同函数，但只会触发最后一次函数调用。通俗一点讲就是设置一个规定时间（假设是一秒钟），在规定时间内触发事件函数都会使时间重新计时，当规定时间过了直接执行最后一次事件函数；

2.2 使用场景

1. 按钮重复点击；
2. 搜索条的输入搜索；
3. 输入验证；

2.3 实现原理

1. 利用setTimeout定义一个规定时间；
2. 当规定时间内再次触发了时间，则清空定时器重新计时；
3. 当规定时间结束后执行最后一次事件函数；

2.4 防抖函数封装

// 防抖函数封装
const _debounce = (fn, delay) => {
	// 利用闭包定义定时器id变量存储
	let timer = null;
	return () => {
		// 如果有值就清除定时器，重新计时
		if (timer) {
			clearTimeout(timer)
		}
		timer = setTimeout(fn, delay);
	}
};
// 窗口大小发生改变触发函数
const onResize = () => {
	console.log("界面窗口发生改变");
};
// 监听窗口大小发生变化
window.addEventListener('resize', _debounce(onResize, 500));

三、节流（throttle）

3.1 定义

节流（throttle）在一段时间内多次执行相同函数，但只会触发第一次函数调用。通俗一点讲就是设置一个规定时间（假设是一秒钟），在规定时间内触发事件函数只会执行第一次；如果在规定的时间间隔内再次触发事件，函数不会被执行，直到时间间隔结束。

3.2 使用场景

1. 表单提交按钮避免重复点击，重复调用接口；
2. 页面加载时的资源加载；
3. 滚动事件；
4. 窗口大小调整监听；
5. 输入框的重复输入搜索；

3.3 实现原理

1. 利用setTimeout定义一个规定时间；
2. 在规定时间内只执行一次函数；
3. 如果规定时间没到则不执行事件函数，反之执行；

3.4 防抖函数封装

const _throttle = (fn, delay) => {
	let timer = null;
	return () => {
		if (!timer) {
			timer = setTimeout(() => {
				fn();
				timer = null;
			}, delay);
		}
	}
};
// 窗口大小发生改变触发函数
const onResize = () => {
	console.log("界面窗口发生改变");
};
// 监听窗口大小发生变化
window.addEventListener('resize', _throttle(onResize, 500));

四、防抖与节流的区别

4.1 相同点

1. 都是用来实现前端性能优化的不同方式；
2. 主要用于控制事件函数的执行频率；

4.2 不同点

1. 防抖是在规定时间内执行最后一次函数；
2. 节流是在规定时间内执行第一次函数；
3. 节流会在规定时间内一次又一次的执行，可以想象雨滴匀速下落；
4. 防抖是在规定时间内重复触发都会重新计时，类比输入框不停的打字当停下后再去调用搜索；

五、总结

防抖（Debounce）和节流（Throttle）是都是常用的前端优化技术，用于控制函数的执行频率，但它们的实现原理和应用场景有所不同。

需要理解他们各自的实现原理，从而在日常开发中使用到对应场景中。