最近项目中要用一个倒计时，但是当弹窗的时候倒计时会被阻塞，所以我想到使用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. 移动平台MOBA发热与帧率优化

    MOBA项目的优化进入到了第二阶段,千元机,发热严重问题处理,及帧率进一步提升. 回顾之前的优化,当初我的 OPPO R9S不过8-10帧,后来经过了逻辑计算的一些优化后达到10-20帧. 再后来开启 ...

  2. spring-AOP之通知和顾问

    通知和顾问都是切面的实现形式,其中通知可以完成对目标对象方法简单的织入功能. 而顾问包装了通知,可以让我们对通知实现更加精细化的管理,让我们可以指定具体的切入点. 通知分为前置通知,环绕通知及后置通知 ...

  3. vue.js+SSH添加和查询

    Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与 ...

  4. linux 权限之acl

    查看分区ACL权限是否开启 centos 6 dumpe2fs -h /dev/sda1(是查看ext2/ext3/ext4 文件系统信息的命令) centos 7   xfs_growfs /dev ...

  5. [Ting's笔记Day4]将Ruby on Rails项目部署到Heroku

    今天想笔记的是把自己写的Ruby on Rails项目部署(Deploy)到Heroku! Heroku是Salesforce公司旗下的云端服务商,支持多种程序语言像是Ruby,PHP,Python等 ...

  6. cdnbest自定义错误显示节点名教程

    在自定义错误里选择js选项,输入: document.write("error!" + hostname); 这是最简单的写法,只显示节点名,如果要显示其他效果,可自已修改js

  7. JPA和SpringData知识梳理

    一. JPA,全称Java Persistence API,用于对象持久化的API,定义一套接口,来规范众多的ORM框架,所以它是在ORM框架之上的应用. 下面主要讲JPA在Hibernate基础上的 ...

  8. 定时任务APScheduler

    安装 APScheduler $ pip install apscheduler 快速开始 from apscheduler.schedulers.blocking import BlockingSc ...

  9. FortiGate 5.2/5.4 SSLVPN建立

    1.定义源IP池 即用户通过sslvpn拨号成功后获取到的IP地址. 2.定义路由地址 即用户通过sslvpn拨号成功后允许获取到的路由表. 3.建立sslvpn portal 4.定义用户和用户组 ...

  10. 最长子序列dp poj2479 题解

    Maximum sum Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 44476   Accepted: 13796 Des ...