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下面倒计时手滑问题》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
RGB CMYK 转换工具
RGB CMYK 互转工具
HEX HSV 转换工具
HEX HSV 互换工具