6.3.2 使用Lodash库进行函数限流 -TypeScript和Vue从入门到精通(二)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(二)

### 6.3.2 使用Lodash库进行函数限流

在开发复杂的应用时，尤其是在处理前端逻辑时，经常会遇到需要限制某个函数执行频率的场景。比如，用户快速连续点击按钮时，我们不希望后端服务器接收到过多的请求，造成不必要的负载或数据冗余。这时，函数限流（Throttling）就成为了一个非常有用的技术。Lodash，作为一个一致性、模块化、高性能的JavaScript实用工具库，提供了`_.throttle`函数，帮助我们轻松实现这一功能。

#### 6.3.2.1 理解函数限流

函数限流（Throttling）与函数防抖（Debouncing）是两种常见的控制函数执行频率的技术，但它们的目的和实现方式有所不同。函数限流确保函数在特定时间间隔内最多执行一次，而无论触发该函数的动作发生了多少次。这意味着，即使用户连续快速点击按钮，限流函数也会确保后端只接收到一次或有限次数的请求。

#### 6.3.2.2 Lodash的`_.throttle`函数

Lodash的`_.throttle`函数接收两个主要的参数：需要被限流的函数和等待时间（毫秒）。可选地，它还可以接受一个选项对象，用于更细致地控制限流行为，比如是否立即执行首次调用（`leading`）和/或是否允许在限流时间结束时执行最后一次调用（`trailing`）。

- **func** (Function): 需要进行限流的函数。
- **wait** (number): 函数再次被调用之前的等待时间（以毫秒为单位）。
- **[options={}]** (Object): 可选配置对象。
  - **leading** (boolean): 是否在函数首次调用时立即执行。默认为`true`。
  - **trailing** (boolean): 是否在延迟时间结束时执行函数。如果`wait`时间内再次调用函数，则重新计时。默认为`true`。

#### 6.3.2.3 示例：使用`_.throttle`限制按钮点击

假设我们有一个Vue组件，其中包含一个按钮，点击按钮时会触发一个向服务器发送请求的函数。为了避免用户快速点击导致的多次请求，我们可以使用Lodash的`_.throttle`来限制这个函数的执行频率。

```vue
<template>
  <div>
    <button @click="handleClick">点击我</button>
  </div>
</template>

export default {
  methods: {
    // 原始请求函数
    sendRequest() {
      console.log('发送请求...');
      // 这里可以放置实际的请求代码
    },
    
    // 使用_.throttle限流的函数
    throttledSendRequest: _.throttle(this.sendRequest, 2000, { leading: true, trailing: false }),

// 组件方法，绑定到按钮点击事件
    handleClick() {
      this.throttledSendRequest();
    },

// 注意：由于Vue组件的生命周期，直接在methods中使用_.throttle可能不会按预期工作
    // 更好的做法是在created或mounted钩子中初始化throttledSendRequest
    created() {
      this.throttledSendRequest = _.throttle(this.sendRequest, 2000, { leading: true, trailing: false });
    }
  }
}
</script>
```

**注意**：在上面的代码中，直接在`methods`对象中声明`throttledSendRequest`可能不会按预期工作，因为`this`上下文在组件实例化之前是不确定的。因此，推荐在`created`或`mounted`生命周期钩子中初始化`throttledSendRequest`。

#### 6.3.2.4 高级用法：动态调整限流时间

在某些情况下，我们可能需要根据应用的状态或用户的行为动态调整限流时间。虽然`_.throttle`函数本身不直接支持动态更改`wait`时间，但我们可以通过重新应用`_.throttle`来实现这一需求。

```javascript
methods: {
  adjustThrottleTime(newWait) {
    // 取消之前的限流函数
    if (this.throttledSendRequest.cancel) {
      this.throttledSendRequest.cancel();
    }

// 使用新的wait时间重新创建限流函数
    this.throttledSendRequest = _.throttle(this.sendRequest, newWait, { leading: true, trailing: false });
  },

// 其他方法...
}
```

在这个例子中，`adjustThrottleTime`方法接受一个新的等待时间`newWait`，并首先检查当前的`throttledSendRequest`是否有`cancel`方法（Lodash 4.x及以后版本返回的限流函数具有此方法），如果有，则取消当前的限流。之后，使用新的`wait`时间重新创建限流函数。

#### 6.3.2.5 性能与优化

使用`_.throttle`虽然可以有效减少函数执行次数，但也需要注意其可能对性能产生的影响。特别是在高频率触发事件（如滚动、窗口大小调整等）的场景中，如果限流函数内部执行了复杂的逻辑或重计算，仍然可能导致性能问题。

为了优化性能，可以考虑以下几点：

- **减少计算量**：确保限流函数内部尽可能减少不必要的计算或DOM操作。
- **使用防抖作为补充**：在某些情况下，结合使用防抖（Debouncing）和限流（Throttling）可以更有效地控制函数执行频率。
- **按需限流**：只对真正需要限流的函数使用`_.throttle`，避免不必要的性能开销。

#### 6.3.2.6 结论

通过Lodash的`_.throttle`函数，我们可以轻松实现函数的限流，从而有效控制函数执行频率，避免不必要的资源消耗和请求。在Vue项目中，结合Vue的生命周期钩子和组件方法，可以灵活地将这一技术应用于各种场景，提升应用的性能和用户体验。同时，我们也需要注意限流函数可能带来的性能影响，并采取相应的优化措施。

该分类下的相关小册推荐：

vue项目构建基础入门与实战

TypeScript和Vue从入门到精通(一)

Vue3技术解密

TypeScript和Vue从入门到精通(三)

TypeScript和Vue从入门到精通(五)

Vue面试指南

TypeScript和Vue从入门到精通(四)

vuejs组件实例与底层原理精讲

Vue.js从入门到精通(一)

Vue原理与源码解析

Vue源码完全解析

Vue.js从入门到精通(四)