最近项目中要用一个倒计时，但是当弹窗的时候倒计时会被阻塞，所以我想到使用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. 让openvpn自启动的命令笔记(windows)

    "C:\Program Files\OpenVPN\bin\openvpn.exe" --client-config-dir "C:\Program Files\Open ...

  2. 38.Spring-spring和hibernate整合.md

    目录 1.定义各种类对象 2.创建Hibernate配置文件 3.配置applicationContext.xml 4.注意事项 1.定义各种类对象 package per.liyue.sh.demo ...

  3. asmx 接收数据过大 发生错误

    原文:https://www.cnblogs.com/xinaixia/p/5945316.html 错误:已超过传入消息(65536)的最大消息大小配额.若要增加配额,请使用相应绑定元素上的 Max ...

  4. faster rcnn源码阅读笔记1

    自己保存的源码阅读笔记哈 faster rcnn 的主要识别过程(粗略) (开始填坑了): 一张3通道,1600*1600图像输入中,经过特征提取网络,得到100*100*512的feature ma ...

  5. mobilenet之Depthwise +Pointwise

    我们知道,mobilenet是适用于移动端的深度学习网络,主要优点是参数少.模型小.准确率相比一些传统卷积损失少等特点. mobileNet之所以这么ok,是因为引入了Depthwise +Point ...

  6. mysql修改密码方法

    1. 修改密码有三种方法:1.1 ---->用mysqladmin修改密码格式:mysqladmin -u用户名 -p旧密码 password 新密码 例子:# mysqladmin -uroo ...

  7. 绑定checkedComboBox

    using System; namespace CommonLib{ /// <summary> /// CommonCode 的摘要说明. /// </summary> [S ...

  8. 529. Minesweeper扫雷游戏

    ［抄题］: Let's play the minesweeper game (Wikipedia, online game)! You are given a 2D char matrix repre ...

  9. 51单片机学习笔记（郭天祥版）（1）——单片机基础和点亮LED灯

    关于单片机型号的介绍: STC89C52RC40C-PDIP 0721CV4336..... STC:STC公司 89:89系列 C:COMS 52(还有51,54,55,58,516,):2表示存储 ...

  10. Shell 数值、字符串比较

    Shell脚本中,数值与字符串比较是不同的,因此要注意(注意[]括号内参数和括号之间有一个空格). 一.数值比较 -eq 等于,如: if [ $a -eq $b ] -ne    不等于,如: if ...