jQuery Academy · 课时

高效处理事件与节流

Q: 「高效处理事件与节流」这节课中我会学到什么？

针对调整大小或滚动等频繁触发的事件实现节流和防抖，避免过度调用函数并提升响应性。 你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

针对调整大小或滚动等频繁触发的事件实现节流和防抖，避免过度调用函数并提升响应性。

第 2 / 3 课12 个步骤

高效处理事件与节流 是 CoddyKit 上的免费 jQuery Academy 课时。这是第 2 节课，共 3 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 jQuery Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 jQuery Academy 课程共包含 3 节课。

事件过载：性能问题

在构建交互式 Web 应用时，我们经常会依赖滚动、调整大小或输入等事件。这些事件会触发用于更新界面或执行计算的函数。

但是，如果这些事件触发得过于频繁，就可能导致性能瓶颈、用户体验迟缓，甚至使浏览器崩溃。这时，优化技术就变得至关重要。

问题：事件快速触发

让我们看看像 scroll 这样的典型事件，在没有任何优化的情况下会触发得多么频繁。请打开控制台，或在滚动时观察计数器。

请注意，计数增长得非常快，这表明短时间内调用了大量函数。这种方式可能非常低效。

<!DOCTYPE html>
<html>
<head>
<title>Rapid Event Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  body { height: 200vh; font-family: sans-serif; margin: 0; }
  #status { position: fixed; top: 10px; left: 10px; background: #ffe0b2; padding: 8px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
  p { margin-top: 50px; padding: 10px; }
</style>
</head>
<body>
  <div id="status">Scroll Count: 0</div>
  <p>Scroll down to see the event fire rapidly.</p>
  <script>
    $(document).ready(function() {
      let count = 0;
      $(window).on('scroll', function() {
        count++;
        $('#status').text('Scroll Count: ' + count);
      });
    });
  </script>
</body>
</html>

认识节流

节流是一种限制函数在一段时间内调用频率的技术。它可以确保函数在指定的时间间隔内最多执行一次。

您可以把它想象成一扇每 200 毫秒才打开一次的闸门。无论您尝试通过多少次，只有闸门打开时才能通过。

节流实践

下面是一个简单的节流工具。它可以确保滚动处理函数每 200 毫秒最多运行一次，从而显著减少连续滚动期间的调用次数。

请将它与前面的示例进行比较。计数更新得更加平滑，但频率较低，因此节省了资源。

<!DOCTYPE html>
<html>
<head>
<title>Throttling Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  body { height: 200vh; font-family: sans-serif; margin: 0; }
  #status { position: fixed; top: 10px; left: 10px; background: #c8e6c9; padding: 8px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
  p { margin-top: 50px; padding: 10px; }
</style>
</head>
<body>
  <div id="status">Throttled Scroll Count: 0</div>
  <p>Scroll down. The count updates less frequently.</p>
  <script>
    // A simple throttling utility function
    function throttle(func, delay) {
      let canRun = true;
      return function(...args) {
        if (canRun) {
          func.apply(this, args);
          canRun = false;
          setTimeout(() => canRun = true, delay);
        }
      };
    }

    $(document).ready(function() {
      let count = 0;
      const throttledScroll = throttle(function() {
        count++;
        $('#status').text('Throttled Scroll Count: ' + count);
      }, 200); // Update at most every 200ms

      $(window).on('scroll', throttledScroll);
    });
  </script>
</body>
</html>

认识防抖

防抖是另一种技术：从事件上次触发开始，经过指定时间后才执行函数。

您可以把它想象成一盏只有在您停止移动 1 秒后才会熄灭的灯。如果您持续移动，计时器就会重置。只有当用户停止操作并达到指定延迟后，函数才会运行。

防抖实践

这里，我们将防抖应用于文本输入的 keyup 事件。只有在您停止输入 500 毫秒后，状态才会更新。

这非常适合搜索框，因为您通常只希望在用户输入完搜索词后执行一次搜索查询。

<!DOCTYPE html>
<html>
<head>
<title>Debouncing Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  body { font-family: sans-serif; margin: 0; padding: 20px; }
  input { padding: 8px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; width: 100%; max-width: 300px; }
  #status { background: #bbdefb; padding: 8px; margin-top: 15px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
</style>
</head>
<body>
  <p>Type into the box. The status updates only after you pause.</p>
  <input type="text" id="myInput" placeholder="Start typing...">
  <div id="status">Last typed: (none)</div>
  <script>
    // A simple debouncing utility function
    function debounce(func, delay) {
      let timeoutId;
      return function(...args) {
        const context = this;
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
          func.apply(context, args);
        }, delay);
      };
    }

    $(document).ready(function() {
      const debouncedLog = debounce(function(event) {
        $('#status').text('Last typed: ' + $(event.target).val());
      }, 500); // Wait 500ms after typing stops

      $('#myInput').on('keyup', debouncedLog);
    });
  </script>
</body>
</html>

节流与防抖：主要区别

虽然两者都能优化事件处理，但用途不同：

节流：即使事件快速触发，也能保证函数随时间定期执行。它关注的是控制频率。
防抖：确保函数只在一段时间没有活动后才执行。它关注的是等待用户完成操作。

选择哪种技术取决于您的具体使用场景。

实际使用场景

以下是两种技术的常见使用场景：

节流：
- 调整窗口大小
- 滚动页面
- 拖放移动
- 游戏更新（例如发射武器）
防抖：
- 搜索栏输入（自动补全）
- 用户输入后的表单验证
- 在文本编辑器中保存内容
- 用户停止输入后触发 API 调用

与 jQuery 事件集成

您可以轻松地将这些工具函数与 jQuery 的事件方法（如 .on() 或 .bind()）集成。只需将节流或防抖函数作为事件处理函数传入即可。

$(window).on('resize', throttle(myResizeHandler, 250));

$('#search-input').on('keyup', debounce(searchFunction, 300));

这样可以让事件监听器保持高效，并让应用保持响应灵敏。

性能优势

通过实现节流和防抖，您可以获得多项性能优势：

降低 CPU 使用率：函数调用次数减少后，浏览器需要处理的工作也会减少。
界面更流畅：避免动画卡顿或界面无响应。
更好的用户体验：用户会感觉应用运行更快、更流畅。
优化 API 调用：避免向后端发送不必要的大量请求。

快速检查事件优化

以下哪种场景最适合使用防抖处理？

在交互式课程中回答

回顾与下一步

做得很好！您已经学习了两种用于优化事件处理的强大技术：

节流：限制函数的调用频率。
防抖：延迟函数执行，直到一段时间没有活动。

掌握这些技术将显著提升 jQuery 应用的性能和响应能力。请尝试不同的延迟时间，为您的具体需求找到最合适的设置！

免费开始

用 AI 导师学习 JavaScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 22
课程: 48

免费开始学习查看完整课程

常见问题解答

「高效处理事件与节流」课时是免费的吗？

是的 — 「高效处理事件与节流」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 jQuery Academy 课程的其余内容，请升级到 CoddyKit PRO。 jQuery Academy 课程共包含 3 节课。

「高效处理事件与节流」这节课中我会学到什么？

针对调整大小或滚动等频繁触发的事件实现节流和防抖，避免过度调用函数并提升响应性。你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 jQuery Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 jQuery Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 3 节。

「高效处理事件与节流」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 jQuery Academy 课中编写并运行代码吗？

能。每节 jQuery Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 jQuery Academy