h5页面计时活动

移动端倒计时活动，拖动页面或锁屏会发现倒计时失效(测试有问题的手机iphone中的UC浏览器，小辣椒内置浏览器其它未知)，解决方法可考虑使用 web worker。

Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage，onmessage。

counter.js

self.onmessage = function(evt){
    var counter= evt.data;
    var timer = setInterval(function(){
        self.postMessage(--counter);
        if(counter<= 0){
            clearInterval(timer );
            self.close();
        }
    }, 1000);
}

test.html

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
     <title>倒计时</title>
</head>
<body>
<div id="num">60</div>
<script>
    var num = document.getElementById('num');
    var worker = new Worker('counter.js');
    worker.postMessage(60);
    worker.onmessage = function(event){
        num.innerHTML = event.data;
    }
</script>
</body>
</html>

 

posted on 2017-12-22 14:07  zhoujian917  阅读(716)  评论(0)    收藏  举报

导航