最近项目中要用一个倒计时，但是当弹窗的时候倒计时会被阻塞，所以我想到使用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多线程的更多相关文章

  1. Web Worker javascript多线程编程（一）

    什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...

  2. Web Worker javascript多线程编程（二）

    Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...

  3. Javascript多线程引擎(十)---Web服务器

     Javascript多线程引擎(十)---Web服务器 经过一天的努力, 引擎可以支持web服务的功能了并且支持UTF-8的编码, 具有对HTTP参数的解析,状态码的配置, 响应报文的输出等. 提供 ...

  4. Javascript多线程引擎(九)

    Javascript多线程引擎(九)--垃圾回收 垃圾回收这个话题对Programer来说是非常老旧的话题, 从手动的malloc/free 到半自动的 引用计数 再到全自动的 mark-sweep ...

  5. Javascript多线程引擎(八)

    Javascript多线程引擎(八)    Javascript 多线程项目, 做到现在已经快3个月了(加上前期准备编译原理和必要的文档), 该项目(js-engine)已经快进入尾声了, 现在该引擎 ...

  6. Javascript多线程引擎(七)

    Javascript多线程引擎(七)--synchronized关键字 经过两天的努力, 今天synchronzied关键字终于支持了, 如下是测试代码 thread() 是一个开启新线程的API, ...

  7. Javascript多线程引擎(六)

    Javascript多线程引擎(六) 经过三个月的时间, Javascript 引擎已经完成beta版本(还不支持多线程特性, 预计下个星期就可以支持了, 现阶段还在进行测试基本JS单元功能), 并且 ...

  8. Javascript多线程引擎(五)

    Javascript多线程引擎(五)之异常处理 C语言没有提供一个像Java一样的异常处理机制, 这就带来了一个问题, 对于一个子函数中发生异常后, 需要在父函数调用子函数的位置进行Check, 如果 ...

  9. Javascript多线程引擎(四)

    Javascript多线程引擎(四)--之C语言单继承 因为使用C语言做为开发语言, 而C语言在类的支持方面几乎为零, 而Javascript语言的Object类型是一个非常明显的类支持对象,所以这里 ...

  10. Javascript多线程引擎(三)

    Javascript多线程引擎(三) 完成对ECMAScript-262 3rd规范的阅读后, 列出了如下的限制条件 1. 去除正则表达式( 语法识别先不编写) 2. 去除对Function Decl ...

随机推荐

  1. PHPMailer出现SMTP connect() failed.

    很可能是端口问题,最好把$mailer->SMTPSecure和$mailer->Port分别设置为ssl与465或者tls与587,否则某些浏览器不接受不安全的链接,导致$mailer- ...

  2. day43 多表查询和pymysql

    复习 增删改查全语法 # 增 insert into db1.t1(字段2, 字段1, ..., 字段n)|省略 values (值2, 值1, ..., 值n)|(值1, 值2, ..., 值n)[ ...

  3. php RSA非对称加密 的实现

    基本概念 加密的意义 加密的意义在于数据的传输过程中,即使被第三方获取到传输的数据,第三方也不能获取到数据的具体含义. 加密方式分为对称加密和非对称加密 什么是对称加密? 对称加密只使用一个秘钥,加密 ...

  4. Sping Cloud hystrix.stream 自动发现-监控

    相关组件安装脚本 [root@java_gateway4 java_tps]# cat cront_install.sh #!/bin/bashyum install jq -ymkdir /home ...

  5. vue上线后，背景图片路径错误

    build 下的utils.js中添加配置 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, public ...

  6. POJ 1741 Tree(点分治点对<=k)

    Description Give a tree with n vertices,each edge has a length(positive integer less than 1001). Def ...

  7. [leetcode]42. Trapping Rain Water雨水积水问题

    Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...

  8. Activex、OLE、COM、OCX、DLL之间的区别

    先明确组件(Component)和对象(Object)之间的区别: 组件是一个可重用的模块,它是由一组处理过程.数据封装和用户接口组成的业务对象(Rules Object).组件看起来像对象,但不符合 ...

  9. day3-selenium的使用及

    如果是python2的情况下需要设置: # _*_ coding:utf-8 _*_,这样的编码来保证输入中文在运行时不会报错,另外在中文的前边加上u保证编译时不会报错 from selenium i ...

  10. Mybatis 中实体类的编写

    一个实体类对应一个数据表 一个属性对应一个字段 默认情况下类名和属性名都采用 “下划线转驼峰” 的命名方式.但具体采用什么样的命名方式并不重要(方式一致即可),在后面使用这些对象的时候,可以通过 re ...