前端开发是一项需要长时间盯着电脑屏幕进行的工作，长时间的眼部疲劳不但有可能引起视力问题，而且还很容易让人感到疲劳、无精打采。为了改善这一情况，我们可以使用一些工具或者技巧来保护我们的眼睛。 20-20-20 规则是其中一种技巧，也是推荐使用最广的一种。简单来说，就是每隔 20 分钟，让眼睛视线远离屏幕，望向至少 20 英尺的距离，维持 20 秒钟。
在本文中，我们将会介绍如何使用 npm 包 20-20-20-timer 来实现 20-20-20 规则的提醒。
安装
要使用 20-20-20-timer，首先需要在你的项目中安装它。可以使用以下命令来安装它：
npm install 20-20-20-timer
使用
基本使用
20-20-20-timer 的使用非常简单。只需要在你的项目中引入这个库，创建一个定时器，并指定时间间隔，当时间到达后显示提示框即可。
以下是一个示例：
import timer from '20-20-20-timer'; timer.init(20 * 60 * 1000); // 每 20 分钟提醒一次
这段代码将会在你的应用程序中启动一个计时器，每隔 20 分钟就会显示一个提示框。
自定义提示框
默认情况下，20-20-20-timer 使用浏览器的原生提示框（Alert）来显示提醒。然而，你可以通过自定义模式来替换这个提示框，例如在控制台输出一条消息，或者在页面上显示一个模态框。
以下是一个在控制台输出一条消息的示例：
import timer from '20-20-20-timer';
timer.setPrompt(() => console.log('请休息一下，保护眼睛'));
timer.init(20 * 60 * 1000);这会把提示框替换为 console.log()，每隔 20 分钟输出一条消息。
停止和恢复定时器
你也可以在程序执行的过程中停止和恢复定时器，这对于特殊情况下需要对程序进行操作的情况非常有用。
要停止当前正在运行的计时器，请使用 stop() 方法。
-- -------------------- ---- -------
------ ----- ---- -----------------
------------------ -- ---------------------------
-- -----
------------- - -- - ------
-- ---------------
------------- -- -
-------------
-- -----------------
------------- -- -
------------- - -- - ------
-- ------
-- ------在上面的示例中，我们启动了一个计时器，并在 3 秒后停止了它。然后，我们在另一个 3 秒后，又重新启动了定时器。
结论
20-20-20-timer 将 20-20-20 规则的执行变得简单而易于使用。在你的下一个项目中引入这个库，帮助你的团队保护他们的眼睛！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005570781e8991b448d3ee1