前端必备技能：防抖与节流
2023-10-22 23:13:36
在前端开发过程中，我们经常会遇到一些需要频繁触发的事件，比如实时输入查询、滚动条触发等。如果每次触发都进行执行，可能会导致性能下降和后台压力变大。为了解决这个问题，我们需要使用防抖和节流技术来优化这些事件的执行时机。
防抖
防抖是一种技术，它可以将多次连续的事件合并成一次执行。这样可以有效减少函数的执行次数，从而提高性能。防抖的原理很简单，就是设置一个定时器，当事件触发时，启动定时器。如果在定时器到期之前又发生了事件，那么就重新启动定时器。这样，只有当事件在一段时间内没有再触发时，才会执行函数。
防抖的实现非常简单，我们可以使用 JavaScript 的 setTimeout() 函数来实现。下面是一个防抖函数的示例：
function debounce(func, wait) {
let timeout;
return function() {
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(this, args);
}, wait);
};
}
我们可以将这个防抖函数应用到任何需要防抖的事件中。例如，如果我们要对一个输入框的输入事件进行防抖，我们可以使用如下代码：
const input = document.getElementById('input');
input.addEventListener('input', debounce((e) => {
// 这里执行输入框的处理逻辑
}, 500));
这样，当用户在输入框中输入时，只有当用户停止输入 500 毫秒后，才会执行输入框的处理逻辑。这可以有效减少函数的执行次数，从而提高性能。
节流
节流也是一种技术，它可以限制函数的执行频率。这样可以确保函数不会被频繁执行，从而避免性能下降。节流的原理也很简单，就是设置一个时间间隔，当函数被调用时，如果距离上次调用时间间隔小于这个时间间隔，那么函数就不会执行。
节流的实现也同样简单，我们可以使用 JavaScript 的 setInterval() 函数来实现。下面是一个节流函数的示例：
function throttle(func, wait) {
let lastCallTime = 0;
return function() {
const args = arguments;
const now = Date.now();
if (now - lastCallTime >= wait) {
func.apply(this, args);
lastCallTime = now;
}
};
}
我们可以将这个节流函数应用到任何需要节流的事件中。例如，如果我们要对一个滚动条的滚动事件进行节流，我们可以使用如下代码：
const element = document.getElementById('element');
element.addEventListener('scroll', throttle((e) => {
// 这里执行滚动条的处理逻辑
}, 500));
这样，当用户滚动滚动条时，只有当距离上次滚动时间间隔大于 500 毫秒后，才会执行滚动条的处理逻辑。这可以有效限制函数的执行频率，从而避免性能下降。
防抖和节流的应用场景
防抖和节流技术在前端开发中有很多应用场景。比如：
- 实时输入查询：当用户在输入框中输入时，我们可以使用防抖技术来限制查询请求的发送频率，从而避免对服务器造成过大的压力。
- 滚动条触发：当用户滚动滚动条时，我们可以使用节流技术来限制滚动条的触发频率，从而避免性能下降。
- 鼠标移动：当用户移动鼠标时，我们可以使用节流技术来限制鼠标移动事件的触发频率，从而避免性能下降。
- 窗口大小改变：当窗口大小改变时，我们可以使用节流技术来限制窗口大小改变事件的触发频率，从而避免性能下降。
总之，防抖和节流技术是一种非常有用的技术，它可以帮助我们优化前端页面的性能。在实际开发中，我们可以根据不同的业务场景选择合适的技术来使用。
