简介
在使用 Ember.js 时,我们会经常操作一些异步行为,例如 timer、ajax 请求,或是在处理大量数据时,为了避免在操作过程中发生困难,需要将这些行为放进 run loop 中进行处理。
在 Ember.js 中有一套自己的 run loop,但是如何去正确的使用它,确保所有异步操作被正确的添加到正确的 run loop queue 中处理,却是一个令人头疼的问题。ember-runloop-helpers
就是一个为了解决这个问题而诞生的工具。
ember-runloop-helpers
是一个 Ember.js 的 npm 包,它提供了可以方便使用的针对 run loop 的工具和语法糖,使得你不需要再去担心 run loop 的使用问题,并且可以专心的去编写业务逻辑代码。
安装
在安装 ember-runloop-helpers
之前,我们需要先确保 Ember.js 已经被正确的安装。
首先,我们需要打开终端,并切换到你的项目目录下:
-- -----------------------------
然后,我们可以通过 npm 命令,将 ember-runloop-helpers
安装到我们的项目中:
--- ------- ---------------------
如果你使用的是 yarn 包管理器,也可以通过如下命令来安装:
---- --- ---------------------
使用
在安装完成后,我们需要将这个包导入到我们的代码中:
------ - ---------- - ---- ------------------------
接下来,我们可以通过 runloopify
工具将我们需要运行的代码块放进一个 run loop 中进行异步处理,例如:
--------------------- - -- ------- ------------------ - -- --- ---- ---------- --------------------- - -- ----------------- ---
当然,这只是 ember-runloop-helpers
提供的最基本的语法。它还提供了一些非常方便的辅助工具,帮助我们更方便使用 run loop:
delay
工具
delay
工具可以帮助我们在 run loop 中延迟指定时间执行一个指定的代码块。例如:
----------- ---------- - ------------------- ------------ ---
上面的代码片段表示了一个延迟执行 5 秒钟的 console.log 函数。这个函数会放进一个 run loop 队列中,到达指定时间后执行。
debounce
工具
debounce
工具可以帮助我们在用户的一系列操作结束之后,执行一个想要的代码块。例如:
------ - -------- - ---- ------------------------ ------ ------- ------------------ -- -------- --- ----- ------ -- --------------- ------------- --------------- - ------------------------- ------- -- ---
上面的代码片段表示了在用户在输入框中输入完成之后,等待 100 毫秒钟后执行 search 函数。
throttle
工具
throttle
工具可以帮助我们在间隔一定的时间之后,执行一个想要的代码块。例如:
------ - -------- - ---- ------------------------ ------ ------- ------------------ -- - --- --------- --------------- ----------- ------------- ------------ - --- ----- - ---------------- ------------------------- ------- --- ---
上面的代码片段表示了在用户在输入框中输入完成之后,每隔 300 毫秒钟执行一次 search 函数。
结束语
ember-runloop-helpers
提供了一套非常方便易用的工具,可以帮助我们更加优雅地使用 Ember.js 中的 run loop,避免了一些非常令人头疼的问题。当然,这篇文章仅仅是一个简单介绍,并不能完全展示 ember-runloop-helpers
的全部特性。如果你想要深入了解这个工具,可以阅读它的官方文档:https://github.com/DockYard/ember-runloop-helpers。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60066e1ca563576b7b1ecc56