全面解析 JS 中的防抖与节流，区别尽知，场景全用！

防抖和节流：扼要概述

在开始之前，让我们先简单回顾一下防抖和节流。

• 防抖 (debounce)： 防抖是一种技术，它可以延迟函数的执行，直到某些条件满足时才执行。这通常用于处理用户输入，例如当用户在输入框中输入文字时，每输入一个字符就触发一次函数，但我们可能希望延迟函数的执行，直到用户停止输入一段时间后才执行。

• 节流 (throttle)： 节流是一种技术，它可以限制函数在给定时间内只执行一次。这通常用于处理事件，例如当用户在网页上滚动时，滚动条不断触发一个函数，但我们可能希望限制函数的执行频率，以便它不会过度影响页面的性能。

防抖和节流：原理对比

虽然防抖和节流都有延迟函数执行的作用，但其原理和实现方式却截然不同。

防抖

防抖的工作原理是使用一个计时器。当函数被调用时，计时器就会启动。如果在计时器结束之前函数又被调用，那么计时器就会重置。只有当计时器结束并且没有新的函数调用时，函数才会执行。

节流

节流的工作原理是使用一个标记。当函数被调用时，如果标记为 false，那么函数就会执行，并且标记会被设置为 true。在标记为 true 时，即使函数被再次调用，也不会执行。只有当标记再次变为 false 时，函数才能再次执行。

防抖和节流：对比总结

为了更清楚地了解防抖和节流的区别，我们将其对比总结如下：

特性	防抖	节流
目的	延迟函数执行，直到某些条件满足时才执行	限制函数在给定时间内只执行一次
原理	使用计时器，在计时器结束并且没有新的函数调用时，函数才会执行	使用标记，在标记为 false 时，函数才会执行，并且标记会被设置为 true
应用场景	用户输入事件，例如在输入框中输入文字时，每输入一个字符就触发一次函数	事件处理，例如当用户在网页上滚动时，滚动条不断触发一个函数

防抖和节流：应用场景

在实际项目中，防抖和节流有着广泛的应用。下面列举一些常见的应用场景：

防抖

• 搜索框自动完成：当用户在搜索框中输入文字时，防抖可以延迟自动完成建议的出现，直到用户停止输入一段时间后才显示建议。
• 表单验证：当用户在表单中输入信息时，防抖可以延迟表单验证的执行，直到用户输入完成并离开输入框后才进行验证。

节流

• 窗口滚动事件：当用户在网页上滚动时，节流可以限制窗口滚动事件的触发频率，以防止过度影响页面的性能。
• 鼠标移动事件：当用户在网页上移动鼠标时，节流可以限制鼠标移动事件的触发频率，以防止过度影响页面的性能。

结语

掌握防抖和节流技术，可以帮助我们在 JavaScript 项目中优化性能，避免不必要的函数调用，提高代码的可读性和维护性。希望这篇文章能帮助您更深入地理解防抖和节流，并在您的项目中熟练运用这些技术。