码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript多线程

时间:2018-09-26 17:11:26      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:math   .com   text   RKE   func   线程   2.4   项目   javascrip   

最近项目中要用一个倒计时,但是当弹窗的时候倒计时会被阻塞,所以我想到使用Javascript多线程解决该问题。

虽然JavaScript是单线程的,但是通过worker可以让Javascript另外开一个线程来执行你想执行的js文件

let worker = new Worker(js文件路径);

线程之间的通信方式

主线程

worker.PostMessage(你想传输的数据);

worker.onmessage = function(event){

  //event.data是子线程返回的数据

}

子线程

onmessage 接收主线程数据

PostMessage 向主线程发送数据

 

举一个栗子:

<!DOCTYPE html>
<html lang="zh">
<head>
  <title>多线程</title>
  <meta charset="utf-8"/>
  <meta name="Description" content=""/>
  <meta name="Author" content="巽秋"/>
  <style type="text/css"></style>
</head>
<body>
  <div>
    <span id="hour"></span>:<span id="minute"></span>:<span id="second"></span>
  </div>

  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script>
    let worker = new Worker(./index.js);
    worker.postMessage(new Date().getTime()+1000000);
    worker.onmessage = function (event) {
      $("#hour").text(event.data.hour);
      $("#minute").text(event.data.minute);
      $("#second").text(event.data.second);
    }
  </script>
</body>
</html>

上面我在script中让当前文件夹下的index用新的进程执行

下面是index中的代码

onmessage = function (event) {
  let end_time = event.data;
  if(end_time>new Date().getTime()){
    end_time=end_time/1000;
    setInterval(function(){
      let now_time =  Math.round(new Date().getTime()/1000);  //现在的时间
      let time =end_time - now_time;
      let hour = parseInt(time / 60 / 60 );
      let minute = parseInt(time / 60 % 60);
      let seconds = parseInt(time % 60);
      if(now_time<= end_time){
        if(hour < 10){
          hour = "0" + hour;
        }
        if(minute < 10){
          minute = "0" + minute;
        }
        if(seconds < 10){
          seconds = "0" + seconds;
        }
        postMessage({hour:hour,minute:minute,second:seconds}); //返回这一秒的数据
      }
    },1000);
  }
};

 

这样一来虽然弹窗的时候数字不再倒计时了,但是实际上在另一个线程中的js在倒计时,所以这样一来问题就解决了

 

Javascript多线程

标签:math   .com   text   RKE   func   线程   2.4   项目   javascrip   

原文地址:https://www.cnblogs.com/lhyxq/p/9707640.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!