在实际开发中，我们经常面临需要处理频繁触发的事件的情况，这些事件可能是鼠标移动、页面滚动等等，这些事件的触发频率很高，如果每次都进行处理，会对性能造成很大的影响。此时 throttle 和 debounce 就成为了我们解决问题的好帮手。
什么是 throttle？
throttle(节流) 的作用是保证在一定时间间隔内，只执行一次操作，可以控制函数执行频率。
例如，我们需要在 scroll 事件触发的时候，每隔一秒获取一次页面滚动的高度，错误的做法是直接在每次 scroll 事件中调用函数，这样会导致频繁调用函数，耗费系统资源，导致性能下降。正确的做法是使用 throttle 函数，设置时间间隔：
----- ------------- - --------------------------------- --------- ------------------------------- -- - ------------------------------- --
在上面的代码中，我们使用了 RxJS 的 fromEvent 函数来创建一个 scroll 事件流，并使用 throttleTime 函数将事件流中的事件过滤，每隔 1 秒执行一次。
什么是 debounce？
debounce(防抖) 的作用是将多个操作合并成一个操作。
例如，我们在输入框中输入关键字后需要实时搜索匹配的结果，正确的做法是在输入框输入完成后再去搜索匹配的结果，因为用户可能会频繁地输入，如果每次输入都进行搜索，会导致不必要的负担。我们可以使用 debounce 函数，等待一段时间后，如果输入框没有再次被操作，再进行搜索操作。
----- ------------- - ------------------------------ -------- ------------------------------ -- - -------------------------------- --
在上面的代码中，我们同样使用了 RxJS 的 fromEvent 函数来创建一个 input 事件流，并使用 debounceTime 函数将事件流中的事件进行防抖操作，等待用户输入完成后再进行搜索。
throttle 和 debounce 的区别
throttle 是时间间隔内只执行第一次事件，而 debounce 是等待一段时间以后执行最后一次事件。
换句话说，throttle 取样率低，而 debounce 取样数目少。
总结
通过对 RxJS 中的 throttle 和 debounce 函数的介绍，我们可以发现这两个函数都是通过控制函数执行频率以达到节省系统资源、提高性能的目的。在实际开发中，我们可以根据具体的业务需求选择使用 throttle 还是 debounce。
此外，RxJS 中还有许多其他有用的函数，可以帮助我们更好地组织和处理数据流，在编写前端代码时，使用 RxJS 可以帮助我们更加优雅地处理复杂的业务逻辑。
示例代码
--------- -----
----- ----------
------
----- ----------------
----------- ---------------
-------
------
-----
------ ----------- ----------------- -----------------
--- ---------------
------
------- ---------------------------------------------------------------------------------
--------
----- ----- - ---------------------------------------
----- ---- - -------------------------------
-------- ------------- -
----- ------ - --
--- ---- - - -- - - ----- ---- -
-- ---------------------------- --- --- -
--------------
-
-
------ ------
-
----- ------------- - ------------------------------ --------
-------------
---------- -- -------------------
------------------
-----------------------
---------------- -- --------------------------------
----------------- -- -
-------------- - --------------- -- ----------------------------
--
---------
-------
-------上面的代码实现了一个搜索框功能，当输入框输入完成后，会展示搜索到的结果。我们使用了 RxJS 中的 debounceTime 函数，将输入框事件流中的事件进行了防抖操作，并使用 switchMap 将防抖操作后的事件流与搜索结果进行了组合。最后，订阅获得到搜索结果后，将结果展示在页面上。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66501b96d3423812e422d5f7