最近项目中要用一个倒计时，但是当弹窗的时候倒计时会被阻塞，所以我想到使用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. JavaScript: DOM Docunment

    Meaning: In browser , we exchange data using JavaScript code with user. We should know that most of ...

  2. unable to auto-detect email address

    git错误:unable to auto-detect email address 2017年11月14日 08:51:08 陈君豪 阅读数:7914   idea 用git更新的时候报错,详细错误信 ...

  3. DOCKER解析（转）

    Docker基本概念详解 本文只是对Docker的概念做了较为详细的介绍,并不涉及一些像Docker环境的安装以及Docker的一些常见操作和命令. 阅读本文大概需要15分钟,通过阅读本文你将知道一下 ...

  4. Nginx搭建

    Nginx nginx是一个开源的,支持高性能,高并发的www服务和代理服务软件. nginx因具有高并发(特别是静态资源),占用系统资源少等特性,且功能丰富而逐渐流行起来. nginx不但是一个优秀 ...

  5. centos7下面添加htop工具

    htop下载wget http://sourceforge.net/projects/htop/files/latest/download 解压tar -zxf downloadcd htop-1.0 ...

  6. phpexcel获取excel表格内容

    excel表格式: 代码: $objPHPExcel=PHPExcel_IOFactory::load($excelFilePath);//$file_url即Excel文件的路径 $sheet=$o ...

  7. VueJs相关学习网址

      麦子学院 http://www.maiziedu.com/course/916/   慕课网-vue.js入门基础 https://www.imooc.com/learn/694   查阅的网址 ...

  8. 373. Find K Pairs with Smallest Sums 找出求和和最小的k组数

    ［抄题］: You are given two integer arrays nums1 and nums2 sorted in ascending order and an integer k. D ...

  9. [leetcode]150. Evaluate Reverse Polish Notation逆波兰表示法

    Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...

  10. Selenium 学习汇总

    Commands (命令) Action 对当前状态进行操作 失败时,停止测试 Assertion 校验是否有产生正确的值 Element Locators 指定HTML中的某元素 Patterns ...