首页 > web前端 > js教程 > Web 开发中的节流和去抖动

Web 开发中的节流和去抖动

Susan Sarandon
发布: 2024-11-01 17:14:30
原创
678 人浏览过

Throttling and Debouncing in Web Development

滚动、调整大小或键入等事件经常会重复触发功能,有时在几秒钟内触发数百次。想象一下,当用户键入时,搜索栏会从服务器获取建议,或者当浏览器窗口发生变化时,调整大小处理程序会不断调整布局。如果不加以控制,这些功能可能会使浏览器过载,降低用户体验,甚至会因过多的 API 请求而增加服务器成本。

这就是节流和去抖发挥作用的地方。这两种技术有助于管理响应频繁事件而执行函数的频率,使应用程序更流畅、更高效、响应更快。在本指南中,我们将探讨这些概念,检查它们的差异,并了解每个概念如何在特定用例中优化性能。

了解节流和去抖动

限制是一种强制函数执行受控、定期间隔的技术,无论触发事件发生的频率如何。通过限制指定时间段内的调用,限制可确保函数以可预测的方式(稳定且一致)调用,而不是随着事件发生而频繁调用。对于定期执行函数可以改善用户体验而又不会压垮系统的情况来说,这是理想的选择。

另一方面,去抖动会延迟函数的执行,直到经过设定的时间段而不再触发事件。本质上,它在调用函数之前等待活动“暂停”,这使得它在只有在用户活动平息后才应发生操作的情况下非常有用。例如,等到用户完成输入后再在搜索字段中进行 API 调用,可以防止不必要的请求并优化性能。

主要特点

节流的主要特征

  • 执行频率:限制强制执行最大执行率。例如,如果连续触发事件(例如调整窗口大小),则限制可确保该函数在每个定义的时间间隔仅运行一次。

  • 一致速率:此技术保持稳定、受控的执行速度,避免大量的函数调用并允许函数行为的可预测性。

去抖动的主要特征

  • 基于延迟的执行:函数仅在最后一个事件发生后一定延迟后执行,有助于避免过度执行。

  • 事件停止后单次执行:如果事件继续,函数调用会重复延迟,仅在活动停止后执行 - 对于仅在用户完成操作(例如键入)后才应发生操作的输入来说是理想的选择。

节流和去抖动用例

这些技术在不同的场景中大放异彩:

  • 限制用例:

    • 滚动事件:限制对于由以下事件触发的操作有效 滚动,例如内容加载,可以预见地发生 并持续不断地不会压垮界面。
    • 调整大小事件:由窗口调整大小触发的频繁调用是 通过节流控制,允许间隔调整 而不是每次调整大小时都进行更改。
  • 去抖用例:

    • 搜索输入:对于搜索字段,去抖可防止不必要的 API 请求仅等待用户停止输入 一段时间不活动后执行。
    • 调整大小事件:与限制类似,消除调整大小事件的抖动是 有助于确保布局调整仅发生一次,之后 调整大小完成。

实际例子

JavaScript 中的限制
以下是如何实施节流来限制函数执行的频率:

function throttle(func, delay) {
  let lastCall = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      func(...args);
      lastCall = now;
    }
  };
}

const throttledScrollHandler = throttle(() => {
  console.log("Handling scroll event...");
}, 1000);

window.addEventListener("scroll", throttledScrollHandler);
登录后复制

在此示例中,throttle 函数确保 ThreattedScrollHandler 仅每 1000 毫秒(1 秒)调用一次,即使用户快速滚动也是如此。这样可以节省系统资源并提高用户体验。

JavaScript 中的去抖
对于去抖动,这里有一种延迟函数执行直到事件停止的方法:

function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func(...args), delay);
  };
}

const debouncedSearch = debounce((query) => {
  console.log(`Searching for: ${query}`);
}, 300);

const searchInput = document.getElementById("search-input");
searchInput.addEventListener("input", (event) => {
  debouncedSearch(event.target.value);
});
登录后复制

在这种情况下,debouncedSearch 函数仅在键入停止后执行 300 毫秒。每次击键都会重置延迟计时器,因此该功能会等待用户完成输入,从而优化性能和用户体验。

结论

节流和去抖动是优化高频事件的重要技术,可带来更流畅的用户体验和高效的资源利用。通过理解这些技术并仔细应用它们,开发人员可以控制函数执行速率,从而增强前端性能和系统响应能力。

关注我,了解有关 React、TypeScript 和现代 Web 开发实践的更多见解!?‍?

以上是Web 开发中的节流和去抖动的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板