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 阅读(700) 评论(0) 编辑 收藏 举报