您的位置：首页 > 移动开发

js worker 解决移动端定时器锁屏后不继续执行的问题

2016-08-12 14:14 330 查看

一直知道在js里面使用计时器会阻塞ui渲染，并且在移动端锁屏后计时器不会继续执行。网络上常用的思路是启动定时器时记录当前时间，当锁屏进来后通过当前时间和记录时间对比去解决锁屏后不继续执行的问题，个人觉得这种解决办法不优雅。最近看了关于worker的知识，就想着用worker写是不是能解决这个问题，试了试，还真行，代码附上。

worker.js

function timeout(time) {
var clock=setInterval(function() {
time=time*1 - 1;
if (time != 0) {

postMessage(time);
}else{

clearInterval(clock);
}
}, 1000);

}

this.addEventListener("message", function(e){
timeout(e.data);

});

页面

<!DOCTYPE HTML>

<html>

<head>
<meta charset="UTF-8">
<title>1</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta content="telephone=no" name="format-detection">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">


</head>

<body>

<div id="count" style="font-size: 18px;color: red;height: 35px;line-height: 35px;width: 100%;text-align: center;">60</div>

<div id="button" style="height: 35px;line-height:35px;text-align: center;padding: 10px 20px;background-color: green;">按钮</div>

</body>

</html>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">
$(function(){

var myworker= new Worker("work.js");

$('#button').on('click',function(e){

myworker.postMessage(60);

});

myworker.addEventListener("message", function(e){
$('#count').html(e.data)
});

});

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航