Vue实现函数限流的2种方式（附带实例）

在工程开发中，限流是一个非常重要的概念。我们在实际开发中，经常会遇到需要进行限流的场景，例如网页上的某个按钮，当用户单击后，会从后端服务器进行数据的请求，在数据请求回来之前，用户额外的单击是无效且消耗性能的。或者，网页中某个按钮会导致页面的更新，我们需要限制用户对其频繁地进行操作。

这时就可以使用限流函数，常见的限流方案是根据时间间隔进行限流，即在指定的时间间隔内不允许重复执行同一函数。

手动实现一个简易的限流函数

接下来将尝试手动实现一个基于时间间隔的限流函数，用于控制页面中按钮的单击事件。具体要求是：单击按钮后，通过打印方法在控制台输出当前时间，但按钮的两次单击事件触发的间隔不能小于 2 秒。

为此，我们新建一个名为 3.throttle.html 的测试文件。实现这一功能的一个直接思路是使用一个变量来控制按钮事件的可触发状态。在触发按钮事件时，我们将修改这个变量的值，并使用 setTimeout 函数在 2 秒后将其值重置。采用这种思路，实现限流函数将变得相对简单。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>限流函数</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="Application">
    <button @click="click">按钮</button>
  </div>

  <script>
    const { createApp, ref } = Vue;

    let throttle = false;

    // 定义一个限流函数，指定时间间隔内只能触发一次回调
    function throttleTool(callback, timeout) {
      if (!throttle) {
        callback();
      } else {
        return;
      }
      throttle = true;
      setTimeout(() => {
        throttle = false;
      }, timeout);
    }

    const config = {
      setup() {
        const click = () => {
          throttleTool(() => {
            console.log(Date());
          }, 2000);
        };
        return { click };
      }
    };

    createApp(config).mount("#Application");
  </script>
</body>
</html>

运行上述代码，快速单击页面上的按钮，从 VS Code 的控制台可以看到，无论按钮被单击了多少次，打印方法都按照每 2 秒最多执行 1 次的频率进行限流。其实，限流本身是一种通用的逻辑，打印时间才是特定的业务逻辑。

throttleTool 函数可以使用在任何需要限流的业务场景中。限流的核心函数实现如下：

// 限流控制变量
var throttle = false;

// 限流函数的实现
function throttleTool(callback, timeout) {
  // 根据控制变量判断是否可以执行业务逻辑
  if (!throttle) {
    callback();
  } else {
    return;
  }

  // 修改控制变量
  throttle = true;

  // 延时恢复控制变量，实际上是从时间间隔上控制限流的程度
  setTimeout(() => {
    throttle = false;
  }, timeout);
}

因此，在逻辑上我们可以将这个方法抽离到一个单独的 JavaScript 模块中，在需要使用时进行导入，这样可以为任意函数增加限流功能，并且可以任意设置限流的时间间隔。

使用Lodash库进行函数限流防抖

目前我们已经了解了限流函数的实现逻辑。前面我们手动实现了一个简单的限流工具，尽管其能够满足当前的需求，细细分析，还有许多需要优化的地方。在实际开发中，每个业务函数所需要的限流间隔都不同，而且需要各自独立地进行限流。这时，自己编写的限流工具就无法满足需求了。

然而，得益于 JavaScript 生态的繁荣，还有许多第三方工具库提供了函数限流功能，它们强大且易用，Lodash 库就是其中之一。

防抖是与限流类似的一个技术概念，限流的作用是在指定的时间间隔内保证回调函数只执行一次，而防抖的作用是在一次函数调用后，延迟多久再真正执行，在延迟期间如果又出现函数的调用，则会继续延迟。

Lodash 是一款高性能的 JavaScript 实用工具库，它提供了大量数组、对象、字符串等操作方法，使开发者可以更加简单地使用 JavaScript 来编程。

Lodash 库提供了 throttle 函数用于方法调用的限流，以及 debounce 函数用于方法调用的防抖。要使用这些函数，首先需要引入 Lodash 库，代码如下：

<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>

以前面编写的代码为例，向组件中新增两个方法，代码如下：

// 单击限流
const throttleClick = _.throttle(function () {
  console.log(Date());
}, 2000);

// 单击防抖
const debounceClick = _.debounce(function () {
  console.log(Date());
}, 2000);

运行代码，体验一下 Lodash 模块提供的限流和防抖函数功能的差异。

Vue实现函数限流的2种方式（附带实例）

手动实现一个简易的限流函数

使用Lodash库进行函数限流防抖

相关文章