介绍
retrigger 是一个基于事件的组件功能包，它可以在事件的响应过程中完成更多的逻辑和行为，比如延迟调用、限流、缓存等。其使用环境为浏览器和 Node.js，它只有 3kb 大小，可以在没有额外负担的情况下添加到项目中。
安装
使用 npm 安装 retrigger：
--- ------- ---------
引入
在浏览器环境下通过 script 标签引入：
------- ------------------------------------
在 Node.js 环境下引入：
----- --------- - ---------------------
基本用法
retrigger 的使用相当简单，只需要构造一个 Retrigger 实例并传递事件处理函数给它，然后就可以触发这个事件了。
-- ---- --------- -- ----- ------- - --- ---------------------- -- -------- ------------------- -- -- - --------------------- --- -- ---- -------------------------
在上面这个例子中，我们构造了一个 Retrigger 实例，并给这个实例添加了一个名为 'event' 的事件，然后在调用 trigger.trigger('event') 的时候，就会执行事件处理函数，并输出 '事件被触发'。
高级功能
延迟调用
如果我们需要在事件触发后过一段时间再执行事件处理函数，比如在用户输入的时候调用接口查询相关结果，因为用户连续输入很可能会导致接口请求的频繁调用，为了避免这种情况，我们可以使用 retrigger 的 delay 方法。
-- ---- --------- -- ----- ------- - --- ---------------------- -- -------- ------------------- ------- -- - ------------------- --- -- ----- ----- ------ ----- -------------- - ---------------------- ----- -- ------ ---------------------------- ----- ---- ---------------------------- ----- ---- ---------------------------- ----- ----
在上面的例子中，我们使用了 Retrigger 实例的 delay 方法，创建了一个有 500ms 延迟的触发器。接着，我们模拟用户输入，但是由于使用了延迟，所以只有用户停止输入 500ms 后，才会触发事件处理函数，并输出用户最后一次输入的内容。
限流
有时候我们需要限制事件的触发频率，比如防止用户连续发射炮弹，我们可以使用 retrigger 的 throttle 方法。
-- ---- --------- -- ----- ------- - --- ---------------------- -- -------- ------------------- -- -- - -------------------- --- -- ----- -- -------- ----- ---------------- - ------------------------- ------ -- ---------- --------------------------- --------------------------- ---------------------------
在上面的例子中，我们使用了 Retrigger 实例的 throttle 方法，创建了一个每 1s 触发一次的触发器。接着，我们模拟用户连续发射炮弹，但是由于使用了限流，所以只有第一次点击会触发事件处理函数。
缓存
在一些需要频繁获取数据的场景下，使用缓存可以显著提高性能，retrigger 的 cache 方法可以帮助我们达到这个目的。
-- ---- --------- -- ----- ------- - --- ---------------------- -- -------- --------------------- ---- -- - -------------------- ---- ------ ----- --- - - --- --- -- ----------- ----- ------------- - ------------------------- -- ----- -- - - --- -------------------------------------------- ---- -- ----- - --- ---- --- - -- ----- -- - - --- -------------------------------------------- ---- -- --- ---- --- - -- -- -- - - --- -------------------------------------------- ---- -- ----- - --- ---- --- -
在上面的例子中，我们使用了 Retrigger 实例的 cache 方法，创建了一个带缓存的触发器。接着，我们请求 id 为 1 的数据，第一次调用时触发事件处理函数，并输出请求到的数据，第二次调用时直接从缓存中获取数据。我们同时也获取了 id 为 2 的数据，这时会再次触发事件处理函数，并输出请求到的数据。
总结
retrigger 提供了一些高效的事件处理方式，可以在许多场景下帮助我们实现更好的效果。该包的 API 较为简单易懂，使用起来十分方便，在应用中可以减少很多繁琐的处理逻辑，提升工作效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055c2c81e8991b448d9cb9