type
status
date
slug
summary
category
password
tags
icon
在前端开发中，你是否曾遇到过这样的情况：用户在搜索框中疯狂输入，导致请求频繁发送，服务器负载骤增？或是在页面滚动时，频繁触发的事件使得页面性能大打折扣？如果这些问题困扰着你，那么本文就是为你量身打造的。今天，我们将揭开两个提升性能的秘密武器——防抖（Debounce）与节流（Throttle）的神秘面纱，并提供一段实用的代码帮助你轻松实现它们。
什么是防抖与节流？
防抖（Debounce）
防抖的核心理念是：在一段时间内，无论函数被触发了多少次，它只会在最后一次触发后执行一次。换句话说，防抖策略会延迟函数的执行，直到事件停止触发的一段时间后才真正执行。这样可以有效防止由于频繁触发事件而导致的性能问题。
防抖应用场景
- 输入框搜索联想：用户输入时，通过防抖策略减少请求次数，提高响应速度和用户体验。
- 窗口大小调整：在窗口resize事件中使用防抖，可以防止频繁触发导致的性能问题。
节流（Throttle）
节流的核心理念是：在一段时间内，无论函数被触发了多少次，它都会限制函数在这段时间内只能执行一次。也就是说，节流策略会将多次触发的函数调用合并为一次执行，这样可以有效减少函数的执行次数，从而提升性能。
节流应用场景
- 滚动事件：在用户滚动页面时，通过节流策略减少计算频率，提升页面性能。
- 按钮点击：防止按钮在短时间内被多次点击，导致重复提交等问题。
欢迎您在底部评论区留言，一起交流~
- 作者:NotionNext
- 链接:https://lsnx.top/article/promise-race
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。