最近项目中要用一个倒计时，但是当弹窗的时候倒计时会被阻塞，所以我想到使用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. JMM中的重排序及内存屏障

    目录 1. 概述 2. 重排序 2-1. as-if-serial语义 2-2. 重排序的种类 2-3. 从Java源代码到最终实际执行的指令序列, 会分别经历下面3中重排序. 3. 内存屏障类型 3 ...

  2. Java 虚拟机概述

    虚拟机是一种抽象化的计算机,通过在实际的计算机上仿真模拟各种计算机功能来实现的.Java虚拟机有自己完善的硬体架构,如处理器.堆栈.寄存器等,还具有相应的指令系统.Java虚拟机屏蔽了与具体操作系统平 ...

  3. 【Django】网页跳转的问题

    这两天有个比较奇怪了问题困扰着我,就是网页跳转之后页面没有变化,虽然url已经变了,但是页面还是原来的,只是表单数据清空了 就是http://127.0.0.1:8000/signup_signin/ ...

  4. Rifidi

    简介 Rifidi是RFID软件公司Pramari推出了一款开源中间件平台,其主页是:http://www.rifidi.org/ 其分为Edge Server, Workbench, Prototy ...

  5. node.js中通过dgram数据报模块创建UDP服务器和客户端

    node.js中 dgram 模块提供了udp数据包的socket实现,可以方便的创建udp服务器和客户端. 一.创建UDP服务器和客户端 服务端: const dgram = require('dg ...

  6. boost的下载和安装(windows版)

    1 简介 boost是一个准C++标准库,相当于STL的延续和扩充,它的设计理念和STL比较接近,都是利用泛型让复用达到最大化. boost主要包含以下几个大类: 字符串及文本处理.容器.迭代器(it ...

  7. Python列表详解

    #列表:增,删,改,查.names=['N0','N1','N2',['EX1','EX2'],'N3'] '''#------------------------------------------ ...

  8. Django的内置登录、退出、修改密码方法

    Django中内置的登录.退出.修改密码方法. 1.url.py中使用django.contrib.auth中的views函数,django.views.generic中的TemplateView函数 ...

  9. 关闭浏览器时提示的javascript事件

    onbeforeunload事件 它是这样用的: <script language="javascript"> g_blnCheckUnload = true; fun ...

  10. 基于Zxing的二维码的二维码扫描之横屏扫描

    最近项目条码扫描要改为横屏,网上所搜了一下,然后发现我写的需要改动几行代码就可以了,还是很给力的. 如未查看之前的代码,请移步: 基于Zxing的二维码生成和二维码扫描 修改下面写代码就可以实现横屏条 ...