节流与防抖
节流（定期轮询）
是什么
在 JavaScript 中，"节流"（Throttling）是一种性能优化技术，用于控制函数执行的频率，确保函数在指定时间内只执行一次。这种技术通常用于处理持续触发的事件，比如窗口的 resize、scroll 滚动事件或者是 mousemove 鼠标移动事件。
节流的核心思想是在一个时间段内无论触发多少次事件，只执行一次事件处理函数。这样做可以减少事件处理函数的调用次数，避免因频繁处理事件而导致的性能问题。
下面是一个简单的节流函数的实现示例：
function throttle(func, limit) {
let inThrottle;
return function () {
const args = arguments;
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => (inThrottle = false), limit);
}
};
}
// 使用方式
window.addEventListener(
"resize",
throttle(function () {
console.log("Window resized");
}, 2000)
);在这个例子中，throttle 函数接受两个参数：func 是需要被节流的函数，limit 是时间阈值。这个节流函数使用了一个闭包内的变量 inThrottle 来记录函数是否已经被触发。如果 inThrottle 是 false，则允许执行函数并设置 inThrottle 为 true。然后通过 setTimeout 在指定的 limit 时间后将 inThrottle 重置为 false，这样函数就可以在下一个时间阈值后再次被触发。
这种实现方式保证了即使在 limit 时间内触发多次事件，func 也只会被执行一次。这对于性能优化非常有帮助，特别是在处理一些高频事件时。
知识点
JavaScript 中的节流（Throttling）涉及到以下一些关键知识点：
函数节流的目的： 节流的主要目的是为了限制函数在一定时间内的调用频率，从而防止函数在短时间内被高频调用，这通常用于性能优化。
时间阈值： 节流函数通常会有一个时间阈值，即在这段时间内，无论触发了多少次事件，事件处理函数只会执行一次。
闭包： 在实现节流函数时，通常会用到闭包来记住上一次执行函数的时间或者是否已经设置了定时器。
定时器： 使用
setTimeout或setInterval来实现等待一段时间后的函数执行。函数的上下文（Context）和参数（Arguments）： 在节流函数中，我们需要保留原函数的上下文（
this）和参数（arguments），以便在适当的时候调用。立即执行选项： 有些实现支持立即执行选项，即在第一次触发事件时立即执行函数，然后在之后的时间阈值内不再执行。
尾调用优化： 有些节流函数的实现会在时间阈值结束时执行一次函数调用，以保证最后一次触发的事件也能得到处理。
取消节流： 提供一个取消功能，可以在需要的时候停止节流控制。
事件处理与性能： 理解浏览器事件循环和性能考量，知道何时应该使用节流来避免不必要的计算和浏览器重绘。
与防抖（Debouncing）的比较： 防抖是另一种限制函数执行频率的技术，它与节流的区别在于，防抖是在事件停止触发后的一段时间内才执行一次，而节流是按照固定的时间间隔执行。
理解这些概念有助于更好地应用节流技术，并在适当的场景下做出合理的性能优化决策。
使用场景
节流（Throttling）在 JavaScript 中的应用非常广泛，尤其是在处理那些会频繁触发的事件时。以下是一些常见的使用节流的场景和示例：
窗口调整（Window resize）： 当用户调整浏览器窗口大小时，resize 事件会被频繁触发。使用节流可以防止过多的计算和 DOM 操作，从而提高性能。
javascriptwindow.addEventListener( "resize", throttle(function () { console.log("Window resized!"); }, 200) );页面滚动（Scroll）： 滚动事件可以非常频繁，特别是在用户快速滚动页面时。节流可以用来限制例如懒加载图片或者是无限滚动加载更多内容的函数调用频率。
javascriptwindow.addEventListener( "scroll", throttle(function () { console.log("Scrolled!"); }, 200) );鼠标移动（Mousemove）： 鼠标移动是另一个可以非常高频触发的事件。如果你有一个随着鼠标移动而更新的功能（比如一个实时的鼠标位置提示器），节流可以帮助减少更新频率。
javascriptdocument.addEventListener( "mousemove", throttle(function (e) { console.log(`Mouse moved to ${e.clientX}, ${e.clientY}`); }, 100) );数据输入（Data input）： 当用户在输入数据时（如在搜索框中输入），你可能不希望在每个键盘敲击后都去执行一个操作（如实时搜索）。节流可以限制这些操作的触发频率。
javascriptconst input = document.getElementById("search-box"); input.addEventListener( "input", throttle(function (e) { console.log(`Input event triggered with value: ${e.target.value}`); }, 300) );游戏中的按键响应（Game key presses）： 在游戏中，你可能需要限制玩家的某些动作频率，例如射击或跳跃，以避免过快的重复动作。
javascriptdocument.addEventListener( "keydown", throttle(function (e) { if (e.code === "Space") { console.log("Shoot!"); } }, 500) );API 调用（API calls）： 如果你的应用需要根据用户的输入或其他行为调用后端 API，节流可以帮助你减少不必要的网络请求。
javascript// 假设有一个函数用于发送搜索请求 function search(query) { // 发送搜索请求到服务器 } // 节流搜索请求 const throttledSearch = throttle(search, 500); input.addEventListener("input", function (e) { throttledSearch(e.target.value); });
在这些示例中，throttle 函数将确保即使事件触发得非常频繁，事件处理函数也只会按照指定的频率执行，从而帮助避免性能问题，如界面卡顿或过度的 CPU 使用。
继续补充节流的使用场景：
监控用户活动： 在需要监控用户活动并在特定频率报告这些活动时，节流可以确保报告的频率保持在可控范围内。
javascriptdocument.addEventListener( "mousemove", throttle(function () { // 更新服务器上的用户活动状态 }, 2000) );性能跟踪（Performance tracking）： 如果你正在记录页面性能数据，如 FPS（每秒帧数），你可能不需要在每一帧都进行计算。节流可以帮助你降低数据收集的频率。
javascriptwindow.requestAnimationFrame(function updatePerformance() { // 计算并记录性能数据 window.requestAnimationFrame(updatePerformance); }); // 使用节流来限制实际的记录频率 const throttledRecordPerformance = throttle(function () { // 记录性能数据的函数 }, 1000);实时搜索（Autocomplete）： 当用户在搜索框中键入以获取实时建议时，你不想为每个键击都发送一个请求。节流可以减少请求的数量，只在用户暂停或减慢输入时发送请求。
javascriptconst autocomplete = document.getElementById("autocomplete-input"); autocomplete.addEventListener( "keyup", throttle(function (e) { // 发起自动完成搜索请求的函数 }, 300) );图表或图形的实时更新： 如果你有一个图表或图形界面，它需要根据用户的输入或其他实时数据进行更新，使用节流可以防止图表刷新得过于频繁，导致用户界面变得卡顿。
javascriptconst slider = document.getElementById("data-slider"); slider.addEventListener( "input", throttle(function (e) { // 更新图表显示的函数 }, 250) );节流按钮点击： 在某些情况下，你可能需要防止用户快速重复点击按钮，例如提交表单。节流可以帮助限制按钮点击的频率。
javascriptconst submitButton = document.getElementById("submit-button"); submitButton.addEventListener( "click", throttle(function (e) { // 提交表单的逻辑 }, 1000) );节流网络状态检查： 如果你的应用需要定期检查网络状态或者进行心跳检测，节流可以帮助你控制检查的间隔。
javascriptconst throttledCheckNetworkStatus = throttle(function () { // 检查网络状态的逻辑 }, 10000); // 定期执行网络状态检查 setInterval(throttledCheckNetworkStatus, 1000);
在所有这些场景中，节流的关键是找到一个平衡点，即在保证性能的同时，还能提供及时的用户反馈或所需的实时功能。正确使用节流可以显著提升应用的响应性和性能。
防抖（间隔单次）
是什么
防抖（Debouncing）是一种在前端开发中常用的技术，用于确保一段时间内不管事件触发了多少次，只执行一次处理函数。这主要应用于性能优化的场景，比如输入框连续输入时的验证、搜索建议（autocomplete）、窗口大小改变（resize）、滚动（scroll）等。
在没有防抖的情况下，如果用户频繁触发事件，如连续快速地点击按钮，那么事件处理函数也会被频繁调用，这可能导致性能问题。防抖通过延迟执行来解决这个问题：它会等待一段时间后没有再次触发事件时，才执行一次处理函数。
这是一个 JavaScript 中实现防抖功能的基本示例：
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
// 使用防抖函数
const debouncedFunction = debounce(function () {
console.log("Function executed after 200ms of inactivity!");
}, 200);
window.addEventListener("resize", debouncedFunction);在这个例子中，debounce 函数接受一个函数 func 和一个等待时间 wait 作为参数。它返回一个新的函数，这个新函数会在事件触发后等待指定的时间 wait，如果在这段时间内没有再次触发事件，那么原函数 func 就会被执行。如果在等待时间内事件再次触发，那么计时器会被重置，直到事件停止触发后的 wait 毫秒，函数才会执行。
这样，无论事件触发了多少次，只要每次触发的间隔小于 wait 指定的时间，原函数 func 只会在最后一次事件触发后的 wait 毫秒被执行一次。
知识点
防抖（Debounce）作为一种在 Web 开发中常用的技术，旨在提高应用程序的性能和用户体验。以下是与防抖相关的一些关键知识点：
概念理解: 防抖是一种控制函数执行频率的技术，确保目标函数在一系列连续的函数调用中只被调用一次，通常在最后一次调用后的一段时间内执行。
实现机制: 防抖通常通过设置一个定时器实现，当事件被触发时，延迟执行目标函数。如果在延迟期间事件再次被触发，则重新开始计时。
应用场景:
- 输入框实时搜索建议（如用户停止输入后才发送请求）
- 窗口大小调整（resize）
- 按钮快速连续点击
- 表单验证
- 滚动事件处理（scroll）
立即执行选项: 防抖函数通常提供两种模式：非立即执行和立即执行。
- 非立即执行：事件触发后，等待指定时间后执行函数。
- 立即执行：事件触发后立即执行函数，然后无视接下来的事件直到等待时间过去。
参数传递: 防抖函数应能够传递原始事件处理函数所需的参数。
返回值: 防抖函数可以返回原始函数的返回值，但由于使用了定时器，返回值通常是不可用的，除非使用立即执行模式，并且是第一次触发。
取消功能: 有时你可能需要取消防抖函数的延迟调用，因此实现防抖时通常会提供一个取消方法。
边缘情况处理: 考虑到定时器的生命周期和内存管理，确保在组件卸载或页面关闭时清除定时器。
第三方库: 在许多项目中，开发人员可能会使用 Lodash 或 Underscore 等第三方库，这些库提供了现成的防抖函数。
与节流（Throttle）的比较: 节流与防抖类似，但是节流保证在指定时间内只触发一次函数，无论事件触发了多少次。
下面是一个带有取消和立即执行选项的防抖函数示例：
function debounce(func, wait, immediate) {
var timeout;
return function () {
var context = this,
args = arguments;
var later = function () {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
// 返回的防抖函数也包含一个取消方法
debounced.cancel = function () {
clearTimeout(timeout);
timeout = null;
};
return debounced;
}理解这些知识点可以帮助你更有效地使用防抖技术，并在合适的场合应用它们以提升应用程序的性能和用户体验。
使用场景
防抖（Debounce）技术在前端开发中有许多应用场景，特别是在处理那些基于用户或系统活动频繁触发的事件时。以下是一些常见的使用场景和示例：
搜索框输入建议（Autocomplete）: 当用户在搜索框中输入文本时，你可能希望在用户停止输入一段时间后再发送请求到服务器以获取建议列表。这样可以减少不必要的请求量。
javascriptconst searchInput = document.getElementById("search-input"); searchInput.addEventListener( "input", debounce(function (e) { // 发送请求获取搜索建议 fetchSuggestions(e.target.value); }, 500) ); // 500毫秒内没有新的输入才触发窗口大小调整（Window Resize）: 当用户调整浏览器窗口大小时，可能需要重新计算布局或执行其他操作。由于
resize事件可能会连续快速触发，使用防抖可以在调整结束后执行一次。javascriptwindow.addEventListener( "resize", debounce(function () { console.log("Window resize event debounced!"); // 这里执行重计算布局的代码 }, 250) );按钮防重复点击: 防止用户快速连续点击按钮导致函数多次执行，例如提交表单按钮。
javascriptconst submitButton = document.getElementById("submit-button"); submitButton.addEventListener( "click", debounce( function () { console.log("Form submitted!"); // 这里执行提交表单的代码 }, 1000, true ) ); // 第三个参数为true表示立即执行表单验证: 当用户填写表单项时，可以在用户停止输入后进行数据验证，而不是每输入一个字符就验证一次。
javascriptconst emailInput = document.getElementById("email-input"); emailInput.addEventListener( "input", debounce(function (e) { // 验证邮箱格式 validateEmail(e.target.value); }, 400) );滚动事件处理（Scroll）: 在用户滚动页面时，可能希望执行一些操作，如懒加载图片或无限滚动加载内容。防抖可以确保这些操作不会过于频繁地执行。
javascriptwindow.addEventListener( "scroll", debounce(function () { console.log("Scroll event debounced!"); // 这里执行懒加载图片或加载新内容的代码 }, 100) );
在这些场景中，防抖函数能够帮助你控制函数的执行频率，避免因过多的计算或请求而导致的性能问题。通过适当的延迟，在保证用户体验的同时提升应用性能。
当然，除了上述提到的场景之外，防抖还可以应用于其他多种场景。以下是更多的示例：
实时数据保存: 如果你有一个在线文档编辑器，用户在编辑时，你可能希望在用户停止输入后自动保存文档，而不是每次按键都尝试保存。
javascriptconst editor = document.getElementById("document-editor"); editor.addEventListener( "keyup", debounce(function () { console.log("Saving data..."); // 这里执行保存文档的代码 }, 2000) ); // 用户停止输入2秒后自动保存游戏中的按键处理: 在游戏中，有时候你会希望某些按键响应不要太敏感，例如，一个用于发射子弹的按钮，你可能希望用户不能够通过极快的点击来连续发射。
javascriptconst fireButton = document.getElementById("fire-button"); fireButton.addEventListener( "click", debounce(function () { console.log("Fire!"); // 这里执行发射子弹的代码 }, 300) ); // 300毫秒内的连续点击不会连续发射财务应用中的数值计算: 如果你正在开发一个财务应用，用户输入的每个数值可能都需要进行复杂的计算（如即时税务计算或货币转换），使用防抖可以减少计算次数。
javascriptconst amountInput = document.getElementById("amount-input"); amountInput.addEventListener( "input", debounce(function (e) { console.log("Calculating taxes..."); // 这里执行计算的代码 }, 600) ); // 用户停止输入600毫秒后执行计算音乐或视频应用中的音量控制: 用户调整音量时，你可能不希望每一个微小的变化都立即生效，特别是如果这涉及到复杂的后台处理（如实时音频效果应用）。
javascriptconst volumeSlider = document.getElementById("volume-slider"); volumeSlider.addEventListener( "input", debounce(function (e) { console.log("Adjusting volume..."); // 这里执行调整音量的代码 }, 200) ); // 用户停止调整200毫秒后调整音量图形用户界面的动态布局调整: 在图形编辑器中，用户可能会调整组件的大小或位置。防抖可以用来在用户完成调整后再更新布局。
javascriptconst resizeHandle = document.getElementById("resize-handle"); resizeHandle.addEventListener( "drag", debounce(function () { console.log("Updating layout..."); // 这里执行更新布局的代码 }, 150) ); // 用户停止拖动150毫秒后更新布局
在实际的开发工作中，你可能会遇到各种需要防抖处理的情况，关键是要识别出哪些操作是由频繁的事件触发，但实际上只需要偶尔响应的。通过防抖，你可以提高应用程序的响应性和性能，同时避免不必要的处理开销。