JavaScript 中的调节器：提升应用程序的性能

做者：Trey Huffine

翻译：疯狂的技术宅

原文：https://levelup.gitconnected....

未经容许严禁转载

调节器是浏览器中经过限制代码要处理的事件数量来提升性能的经常使用技术。当你想以受控的速率执行回调时，应该使用调节器，它容许你在每一个固定的时间间隔内重复处理过渡状态。

我将以一个真实世界的类比开始，而后在 Web 上下文中描述调节器，最后提供有关如何实现节流的注释代码示例。在文章的结尾，有一个带有调节器示例的 Codepen，你能够与之交互以查看其工做原理。若是只关心代码，请跳至 “JavaScript 中的调节器实现” 部分。

调节器是“去抖动” 的表亲，它们均可以提升 Web 应用的性能。可是它们在不一样的状况下使用。当你只关心最终状态时，会使用去抖功能。例如等待用户中止键入以获取预先输入的搜索结果。当你想要以受控的速率处理全部中间状态时，最好使用调节器。例如，当用户调整窗口大小并在页面内容改变时从新排列页面内容时跟踪屏幕宽度，而不是等到用户完成操做时再跟踪。

真实世界中调节器的例子

一个比喻是咱们的饮食方式。咱们想节制饮食，以便每 6 小时吃一顿饭。咱们早上 7 点起床吃早餐，而后节流，直到下午 1 点吃午饭，最后在晚上 7 点吃晚餐。每次吃完饭后，咱们就会阻止本身进食 6 个小时，以确保成天都能以合理的增量得到食物。

这种类比能够扩展到生活中以设定的增量去执行动做的任何情形。例如，咱们但愿每三个月更换一次汽车中的机油。咱们不会提早这样作，由于那是在浪费金钱，咱们也不会拖延，由于这会损坏汽车引擎。咱们会检查挡风玻璃上的贴纸，看是否通过了足够的时间，而后咱们去找机械师。所以，咱们会每 3 个月就进行一次换油，这样能够最有效地处理换油事件。

Web 开发中的节流

为了理解 Web 开发上下文中的限制，假设你有一个滚动事件处理程序，当用户在页面上向下移动时，你想在其中向用户显示新内容。若是在每次用户滚动单个像素时都执行回调，假如快速滚动的话，咱们将会很快就被事件阻塞，由于它将快速连续发送数百或数千个事件。相反，咱们对其进行限制，仅每 100 毫秒检查一次滚动，这样每秒仅得到10个回调。用户仍然能够当即感受到响应，可是计算效率更高。

调节器用于建立均匀间隔的函数调用。想象一下，若是你在事件处理程序回调函数中执行大量计算或 API 请求。经过限制这些回调，能够防止应用冻结或对服务器发出没必要要地请求。

JavaScript 中的调节器的实现

让咱们当即进入调节器代码。我会在下面进行描述，而后提供该功能的注释版本。

const throttle = (callback, delay) => {
  let throttleTimeout = null;
  let storedEvent = null;

  const throttledEventHandler = event => {
    storedEvent = event;

    const shouldHandleEvent = !throttleTimeout;

    if (shouldHandleEvent) {
      callback(storedEvent);

      storedEvent = null;

      throttleTimeout = setTimeout(() => {
        throttleTimeout = null;

        if (storedEvent) {
          throttledEventHandler(storedEvent);
        }
      }, delay);
    }
  };

  return throttledEventHandler;
};

这个调节器的实现是最简单易懂的。它仅用于教学目的，并不是是效率最高或代码行数最少的。

调节器是一个高阶函数，这是一个返回另外一函数的函数（为清楚起见，此处命名为 throttledEventHandler）。这样作是为了围绕 callback、delay、throttleTimeout 和 storedEvent 参数造成一个闭包。这保留了在执行 throttledEventHandler 时要读取的每一个变量的值。如下是每一个变量的定义：

• callback：你想要以给定速率执行的节流函数。
• delay：你但愿节流函数在屡次执行 callback 之间等待的时间。
• throttleTimeout: The value used to indicate a running throttle created by our setTimeout.
• throttleTimeout：该值用于指示由 setTimeout 建立的调节器。
• storedEvent：你想经过节流 callback 处理的事件。该值将不断更新，直到截流结束。

咱们能够在如下代码中使用调节器：

var returnedFunction = throttle(function() {
  // Do all the taxing stuff and API requests
}, 500);

window.addEventListener('scroll', returnedFunction);

因为调节器返回一个函数，所以第一个例子中的 throttledEventHandler 和第二个例子中的 returnedFunction 函数其实是相同的函数。每次用户滚动鼠标时，它将执行 throttledEventHandler /returnedFunction。

下面逐步说明在截流函数时会发生什么。首先，咱们围绕变量建立一个闭包，以便每次执行时它们均可用于ThrottledEventHandler。 ThrottledEventHandler 接收到 1 个做为事件的参数。它将事件存储在 storedEvent 变量中。

而后检查运行是否超时（即激活调节器）。若是调节器生效，那么 throttledEventHandler 已经完成了该执行并等待执行回调。若是调节器为非活动状态，则能够用回调函数当即处理该事件。而后调用 setTimeout 并存储超时值，该值代表调节器正在生效。

当 timeout 处于活动状态时，将始终存储最新事件。这时则会跳过回调的执行，这可使咱们免于执行 CPU 密集型任务或调用咱们的 API。

当 setTimeout 结束时，将 throttleTimeout 置为空，这代表该函数再也不受到限制而且能够处理事件。若是有一个 storedEvent，咱们想当即处理它，这是则会递归地调用 throttledEventHandler。 setTimeout 内部的递归调用使咱们可以以恒定的速率处理事件。只要有新事件继续发生，它就会在指望的延迟后重复执行相同的处理过程。

该函数的注释版本：

// 传递咱们要限制的回调以及限制事件之间的延迟
const throttle = (callback, delay) => {
  // 在这些变量周围建立一个闭包。
  // 它们将在调节器处理的全部事件之间共享。
  let throttleTimeout = null;
  let storedEvent = null;

  // 当调节器处于活动状态时，此函数将处理事件和调节器回调。
  const throttledEventHandler = event => {
    // 每次迭代都更新存储的事件
    storedEvent = event;

    // 若是调节器还没有激活，咱们将使用事件执行回调
    const shouldHandleEvent = !throttleTimeout;

    // 若是没有活动的调节器，将执行回调并建立一个新的调节器。
    if (shouldHandleEvent) {
      // 处理咱们的事件
      callback(storedEvent);

      // 因为咱们使用了已存储的事件，所以将其清空。
      storedEvent = null;

      // 经过设置超时来建立新的限制，以防止在延迟期间处理事件。
      // 超时结束后，若是有存储的事件，则执调节器。
      throttleTimeout = setTimeout(() => {
        // 因为调节器时间已到期，所以咱们当即使调节器超时无效。
        throttleTimeout = null;

        // 若是咱们有一个存储的事件，则递归调用此函数。
        // 递归使咱们可以在事件发生时连续运行。
        // 若是事件中止了，咱们的调节器将结束。 若是有新事件发生，它将当即执行。
        if (storedEvent) {
          // 因为超时结束：
          // 1. 因为节流时间如今为 null，所以本递归调用将当即执行 `callback`
          // 2. 它将从新启动调节器 timer，使咱们能够重复调节器过程
          throttledEventHandler(storedEvent);
        }
      }, delay);
    }
  };

  // 返回受限制的事件处理做为闭包
  return throttledEventHandler;
};

互动示例

https://codepen.io/treyhuffin...`

总结

对于 JavaScript 开发人员而言，节流是一个很是重要且有益的概念。它是提升 Web 应用性能的经常使用工具，从头开始实施节流功能还能够加强你的高级 JS 技术，例如闭包、异步事件处理、高阶函数和递归。

---

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

• 深刻理解Shadow DOM v1
• 一步步教你用 WebVR 实现虚拟现实游戏
• 13个帮你提升开发效率的现代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工做的？从调用栈到Promise你须要知道的一切
• WebSocket实战：在 Node 和 React 之间进行实时通讯
• 关于 Git 的 20 个面试题
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什么？
• 30分钟用Node.js构建一个API服务器
• Javascript的对象拷贝
• 程序员30岁前月薪达不到30K，该何去何从
• 14个最好的 JavaScript 数据可视化库
• 8 个给前端的顶级 VS Code 扩展插件
• Node.js 多线程彻底指南
• 把HTML转成PDF的4个方案及实现

---

• 更多文章...