按捺不住的鼠标手？程序背后的小动作，你不知道
2023-11-27 15:41:18
网络卡顿背后的真相：防抖和节流如何优化你的代码
作为互联网时代的常客，网络卡顿可谓是我们的日常烦心事。无论是点击链接还是图片，当程序迟迟没有反应时，我们都会烦躁不已，疯狂点击鼠标，恨不得把鼠标点穿。
殊不知，在我们看似无用的操作背后，程序实际上正在经历着无数次的繁琐运作。每点击一次，程序便会触发多个事件监听，它们不断地向服务器发送请求，而服务器也疲于奔命地处理这些请求。如此一来，网络卡顿愈演愈烈，程序运行更加缓慢。
为了解决这一难题，前端开发人员绞尽脑汁，发明了两种巧妙的优化技巧：防抖和节流。
防抖（debounce）：让最后一次点击生效
想象一下，你在搜索框中输入内容，每输入一个字母，搜索结果就会不断更新。然而，如果你的手速太快，在短时间内连续触发了多次输入事件，服务器就会收到多余的请求，造成不必要的资源浪费。
防抖应运而生。它就像一个过滤网，只允许在一段时间内最后一次事件监听生效。也就是说，如果你在 500 毫秒内连续点击了多次按钮，只有最后一次点击会被执行，避免了服务器的频繁请求。
节流（throttle）：限制事件监听频率
不同于防抖，节流关注的是事件监听的频率。它就像一个闸门，在一定时间内只允许一次事件监听通过。也就是说，如果你在 500 毫秒内连续点击了多次按钮，只有第一次点击会被执行，后面的点击都会被忽略。
如何使用防抖和节流？
在 JavaScript 中，我们可以借助 lodash 库轻松实现防抖和节流。
import { debounce, throttle } from 'lodash';
const button = document.querySelector('button');
// 防抖：在 500 毫秒内，只执行最后一次点击事件
button.addEventListener('click', debounce(() => {
console.log('防抖：你点击了按钮');
}, 500));
// 节流：在 500 毫秒内，只执行第一次点击事件
button.addEventListener('click', throttle(() => {
console.log('节流：你点击了按钮');
}, 500));
防抖与节流的使用场景
防抖和节流各有其用武之地。
- 防抖适用于需要在一段时间内只执行一次的事件监听，例如搜索框中的输入事件监听。
- 节流适用于需要在一段时间内多次执行的事件监听，但又不需要执行得太频繁，例如窗口滚动事件监听。
使用注意事项
使用防抖和节流时，需要注意以下几点：
- 防抖和节流都会导致事件监听的延迟，因此需要谨慎使用。
- 防抖和节流只适用于事件监听，不适用于其他类型的函数。
- 防抖和节流的实现方式有多种，需要根据具体情况选择合适的实现方式。
常见问题解答
- 防抖和节流的区别是什么？
防抖只执行最后一次事件监听，而节流只执行第一次事件监听，并忽略后面的事件监听。 - 防抖和节流会影响性能吗？
适当地使用防抖和节流可以提高程序性能，但过度使用可能会导致事件监听延迟。 - 如何在 React 中使用防抖和节流？
可以使用useDebounce和useThrottle钩子，或者第三方库如react-debounce-throttle。 - 防抖和节流有什么局限性？
防抖和节流不适用于需要立即执行的事件监听。 - 如何在 JavaScript 中手动实现防抖和节流？
可以使用setTimeout和clearTimeout实现。
结论
防抖和节流是前端开发中必不可少的优化技巧，可以有效减少服务器请求，提高程序性能。通过理解它们的原理和使用场景，我们可以合理地运用这些技巧，让我们的代码运行得更加流畅高效。
