js Worker解决ios下面倒计时手滑问题
栏目: JavaScript · 发布时间: 7年前
内容简介：js Worker解决ios下面倒计时手滑问题
前言
倒计时我们经常用。之前我也有很多文章提及过。例如：setTimeout倒计时等等。最近在移动端开发过程中，遇到一个ios手机滑动，倒计时卡住的问题，针对这个问题，我们可以用js的Worker。
倒计时案例
用setInterval写的最基本的倒计时，代码如下：
<body>
<div id="haorooms">60</div>
<script>
var haorooms = document.getElementById('haorooms');
var num = 60;
var T = setInterval(function(){
haorooms.innerHTML = --num;
if(num <= 0){
clearInterval(T);
}
}, 1000);
</script>
</body>
这段代码在PC中可以正常运行，在Android中也可以正常运行，但是拿到ios中，就会有一个问题，来看图：
上图中，当倒计时走到37的时候，用手拖动页面，这个时候js代码会被阻塞，导致倒计时不在执行。
针对这个问题，只能用我们上文中提及的Worker API了。
Worker API
Web Workers API 的 Worker 接口代表一个可以轻松创建的后台任务，并可以将消息发送回其创建者。创建一个工作程序只要简单的调用Worker() 构造函数，并指定一个要在工作线程中运行的脚本。
worker 还能够使用 XMLHttpRequest 实现网络 I/O 操作， 只不过 XMLHttpRequest 上的 responseXML 与 channel 两个属性值始终返回 null。
2个方法
1、postMessage()
向 worker 的内部作用域内传递消息。该方法接收一个单独的参数，即要传递给 worker 的数据。
void postMessage( Object aMessage [, sequence<Transferable> transferList]);
参数：
aMessage：
传输给 worker 的对象；它将包含于传递给 onmessage 处理函数的事件对象中的 data 字段内。你可以传递任意值或是经过结构化拷贝算法处理过的 JavaScript 对象，即可以包含循环引用。
transferList：
一个可选的对象数组，用于转让它们的所有权。如果一个对象的所有权被转让，那么它在原来的上下文内将不可使用，而只能在转让到的 worker 内可用。
2、terminate()
立即终止 worker。该方法不会给 worker 留下任何完成操作的机会；就是简单的立即停止。
解决方案
我们的思路是，将倒计时的计算放到一个单独的文件里，使用 Worder 去执行这个文件。
新建一个 countdown.js 文件：
self.onmessage = function(event){
var num = event.data;
var T = setInterval(function(){
self.postMessage(--num);
if(num <= 0){
clearInterval(T);
self.close();
}
}, 1000);
}
由于这个js文件是由 Worker 来在后台执行的文件，所以这个文件内代码的 self 指向的就是 Worker 对象。我们通过 onmessage 时间接收来自页面的倒计时数值，然后原封不动的把之前的倒计时代码拷贝过来，唯一不同的就是使用 self.close() 语句来关闭 Worker。
然后修改之前的页面文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时</title>
</head>
<body>
<div id="haorooms">60</div>
<script>
var haorooms = document.getElementById('haorooms');
var w = new Worker('counter.js');
w.postMessage(60);
w.onmessage = function(event){
haorooms.innerHTML = event.data;
}
</script>
</body>
</html>
在PC中刷新你的页面，可以看到依然正确工作，之后再拿到ios中做之前gif图同样的操作，如下图：
我们可以看到，在55秒的时候开始拖动页面，这个时候倒计时停止了，不过，当我们放手之后，倒计时会立刻恢复到正常应该到达的时刻，而不会产生任何误差和延迟，这样，我们就比较完美的解决了这个问题。
注意
上面的Worker代码必须在localhost等环境下面运行，因为上面提及过，它用到了XMLHttpRequest。
关于Worker更多API，请查看： https://developer.mozilla.org/en-US/docs/Web/API/Worker
中文版可以看： https://developer.mozilla.org/zh-CN/docs/Web/API/Worker
部分资料同事提供，来源已无法考究作者。
以上所述就是小编给大家介绍的《js Worker解决ios下面倒计时手滑问题》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
The Zen of CSS Design
Dave Shea、Molly E. Holzschlag / Peachpit Press / 2005-2-27 / USD 44.99
Proving once and for all that standards-compliant design does not equal dull design, this inspiring tome uses examples from the landmark CSS Zen Garden site as the foundation for discussions on how to......一起来看看 《The Zen of CSS Design》 这本书的介绍吧!
