RxJS 通俗易懂的 debounce 和 throttle-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们经常会遇到一些需求需要控制事件的触发频率，比如搜索框输入后需要等待一段时间才能发送请求，或者滚动事件需要控制触发频率等等。在这些情况下，我们可以使用 RxJS 中的 debounce 和 throttle 来控制事件触发的频率。

debounce

debounce 的作用是在一段时间内只执行一次操作，如果在这段时间内有多个操作，只会执行最后一个操作。比如我们在搜索框中输入关键字，如果每次输入都发送请求，那么很可能会导致服务器压力过大，因此我们可以使用 debounce 来控制请求的频率。

示例代码

// javascriptcn.com 代码示例
import { fromEvent } from "rxjs";
import { debounceTime } from "rxjs/operators";

const input = document.querySelector("input");
const observable = fromEvent(input, "input");

observable.pipe(debounceTime(500)).subscribe(() => {
  console.log("debounce");
});

上面的代码中，我们使用了 RxJS 中的 fromEvent 方法来创建一个可观察对象，监听 input 元素的 input 事件。然后使用 debounceTime 方法来控制事件触发的频率，这里设置为 500ms。最后通过 subscribe 方法来订阅事件。

throttle

throttle 的作用是在一段时间内只执行一次操作，如果在这段时间内有多个操作，只会忽略后面的操作。比如我们在滚动页面时，如果每次滚动都触发事件，那么会导致页面卡顿，因此我们可以使用 throttle 来控制事件的触发频率。

示例代码

import { fromEvent } from "rxjs";
import { throttleTime } from "rxjs/operators";

const observable = fromEvent(window, "scroll");

observable.pipe(throttleTime(500)).subscribe(() => {
  console.log("throttle");
});

上面的代码中，我们使用了 RxJS 中的 fromEvent 方法来创建一个可观察对象，监听 window 对象的 scroll 事件。然后使用 throttleTime 方法来控制事件触发的频率，这里设置为 500ms。最后通过 subscribe 方法来订阅事件。

总结

通过本文的介绍，我们了解了 RxJS 中的 debounce 和 throttle 的作用和用法。在实际开发中，我们可以根据具体需求选择使用哪种方法来控制事件的触发频率，从而提高应用的性能和用户体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655859b2d2f5e1655d28a408