查看: 2494|回复: 0

[手机开发] js Worker API 在倒计时中的使用

发表于 2018-1-19 08:00:03

作者:HcySunYang

在做开发的时候,倒计时的需求是很常见的,比如订单待提交和待支付都会有倒计时,市面上的兼职软件在领取任务后都会有倒计时,登录注册中获取验证码的时候也会有倒计时,有的页面只有一个倒计时,而有的页面作为列表页,列表中的每一项都会有倒计时,今天就来聊聊 Worker API 在js倒计时中的使用,以及为什么要使用 Worker 来做倒计时

setInterval 或 setTimeout 的问题

当提到js的倒计时功能时,我想你第一个想到的可能就是 setInterval 这个东东,这个东西在做PC页面的时候并没有什么问题,至少我现在还没遇到什么问题,而当你在移动页面中使用它来做倒计时的时候,就会出问题了,具体来说,是在做ios中的移动页面开发的时候,问题就尤为明显了,我们有以下代码:

  1. <body>
  2. <div id="box">60</div>
  3. <script>
  4. var box = document.getElementById('box');
  5. var num = 60;
  6. var T = setInterval(function(){
  7. box.innerHTML = --num;
  8. if(num <= 0){
  9. clearInterval(T);
  10. }
  11. }, 1000);
  12. </script>
  13. </body>
复制代码

上面的代码很简单,就是一个60秒的倒计时程序,我们使用 setInterval 来完成,这段代码在PC中可以正常运行,在Android中也可以正常运行,但是拿到ios中,就会有一个问题,来看图:

上图中,当倒计时走到37的时候,用手拖动页面,这个时候js代码会被阻塞,导致倒计时不在执行,这个现象很常见,比如当你和朋友玩微信的时候,互相发送自定义表情的gif图的时候,当你滚动聊天界面时,你会发现gif图也会静止,这个问题是ios系统机制的问题,我们没办法从根本上解决,但这并不是最关键的,大家可以发现,在倒计时走到37的时候,用手指操作页面大概有两三面的时间,按正常来讲,时间应该倒计时到 35秒或者34秒,但是图中很清楚的可以看到,在手指停止操作后,时间却从37秒继续倒计时,走到了36秒,这就与时间的倒计时时间造成了差距,假如倒计时的页面很长,比如一个列表页,那么用户在滑动查看页面信心的时候,会造成更多的倒计时延迟,这在一些要求比较精准的倒计时应用中,简直是不允许出现的,虽然后端也会做一层校验。

这个就是我们要说的问题,与其说是 setInterval 或者 setTimeout 的问题,倒不如说是 ios 系统的问题,那么有办法解决这个问题吗?这就是我们要谈到的 Worker API。

Worker API

web Worker API 允许 JavaScript 在后台运行,浏览器实现 Worker API 的方式有很多,每个浏览器厂家可能不尽相同,他们可以使用现线程或后台进程等,这使得 js 代码不被UI线程阻塞,二者互不影响,特别是面对计算量比较大的任务的时候,会给应用程序带来性能上的提升。

web Worker API 的使用很简单,大家可以自行查询相关书籍或博客。相信聪明的你10分钟就能搞定。

使用 Worker 解决问题

我们的思路是,将倒计时的计算放到一个单独的文件里,使用 Worder 去执行这个文件,是不是就可以了呢?
新建一个 countdown.js 文件:

  1. self.onmessage = function(event){
  2. var num = event.data;
  3. var T = setInterval(function(){
  4. self.postMessage(--num);
  5. if(num <= 0){
  6. clearInterval(T);
  7. self.close();
  8. }
  9. }, 1000);
  10. }
复制代码

上面的代码很简单,在 countdown.js 中,由于这个js文件是由 Worker 来在后台执行的文件,所以这个文件内代码的 self 指向的就是 Worker 对象。我们通过 onmessage 时间接收来自页面的倒计时数值,然后原封不动的把之前的倒计时代码拷贝过来,唯一不同的就是使用 self.close() 语句来关闭 Worker。

然后修改之前的页面文件如下:

  1. <body>
  2. <div id="box">60</div>
  3. <script>
  4. var box = document.getElementById('box');
  5. var w = new Worker('countdown.js');
  6. w.postMessage(60);
  7. w.onmessage = function(event){
  8. box.innerHTML = event.data;
  9. }
  10. </script>
  11. </body>
复制代码

在PC中刷新你的页面,可以看到依然正确工作,之后再拿到ios中做之前gif图同样的操作,如下图:

我们可以看到,在55秒的时候开始拖动页面,这个时候倒计时停止了,不过,当我们放手之后,倒计时会立刻恢复到正常应该到达的时刻,而不会产生任何误差和延迟,这样,我们就比较完美的解决了这个问题。

需要注意的地方

在列表页面中,可能会有很多个倒计时,并且每个倒计时的开始时间不尽相同,但切记不要通过循环去 new 很多个 Worker 出来,这样可能会导致应用卡死,特别是如果在做 Hybrid App 中的 H5 页面时,可能会造成闪退,所以你只能 new 一个 Worker 对象出来,然后使用这一个 Worker 对象去做所有列表时间的倒计时,然后在更新视图中使用循环去更新,这样就不会有问题了,另外一个需要注意的是,有些Android机型中的webview不支持 web Worker 。这个时候仅仅去使用 setInterval 就可以了,因为在Android中不存在ios中那种阻塞的情况。

以上就是这篇博客的内容,希望对大家有所帮助 = =。



回复

使用道具 举报