参考大神：Javascript多线程

web worker ---- 6.Web Worker 概述

截图过来：

线程之间的通信

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"/>
</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>

index.js

// 接收主线程数据
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高级学习笔记（2）之js多线程的更多相关文章

  1. node.js day01学习笔记:认识node.js

    Node.js(JavaScript,everywhere) 1.Node.js 介绍 1.1. 为什么要学习Node.js 企业需求 + 具有服务端开发经验更好 + front-end + back ...

  2. 转：JS高级学习笔记（8）- JavaScript执行上下文和执行栈

    必看参考: 请移步:博客园 JavaScript的执行上下文 深入理解JavaScript执行上下文和执行栈 JavaScript 深入之执行上下文 写在开头 入坑前端已经 13 个月了,不能再称自己 ...

  3. JS高级学习笔记（6）- 事件循环

    参考文章:深入理解JS引擎的执行机制        JavaScript 异步.栈.事件循环.任务队列 我的笔记:ES系列之Promise async 和 await Event Loop 前提 js ...

  4. JS高级学习笔记（1）- 数据类型及转换规则

    必读: Javascript对象Oject的强制类型转换 JavaScript筑基篇(二)->JavaScript数据类型 聊一聊valueOf和toString 深入理解JavaScript系 ...

  5. JS高级学习笔记（9） 之 转：前端路由跳转基本原理

    原文链接: 前端路由跳转基本原理 前述 前端三大框架Angular.React和Vue都推行单页面应用SPA开发模式,这是因为在路由切换时,替换DOM Tree中发生修改的DOM部分,来减少原来因为多 ...

  6. JS高级学习笔记（10） 之 js 时怎么解析HTML标签的

    DOM 节点类型 浏览器渲染过程 浏览器是怎么把HTML标签语言和JavaScript联系在一起的,这就是我们常说的DOM. 浏览器中的DOM解析器把HTML翻译成对象(object),然后JavaS ...

  7. vue.js 源代码学习笔记 ----- core scedule.js

    /* @flow */ import type Watcher from './watcher' import config from '../config' import { callHook } ...

  8. vue.js 源代码学习笔记 ----- core array.js

    /* * not type checking this file because flow doesn't play well with * dynamically accessing methods ...

  9. js再学习笔记

    #js再学习笔记 ##基本 1.js严格区分大小写   2.js末尾的分号可加,也可不加   3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var ...

随机推荐

  1. PHPmyadmin Getshell（10.25 第二十七天）

    PHPmyadmin Getshell的方法(1)show global variables like '% secure-file-priv%' 如果该参数设置为空或者指定的文件夹可以利用,然后写木 ...

  2. S7-300数据处理基本知识（结尾以MW8+1 ADD指令实训仿真，并用状态表监控及刷写变量）

    数据处理基本知识汇总 STEP7 的数据类型包括什么? 基本数据类型 复杂数据类型 用于FB(功能块)的输入,输出参数类型 用于FC(功能)的输入,输出参数类型 基本数据类型是什么? 先列举12种数据 ...

  3. SYSTEMTIME 获取日期之差

    #include <windows.h> #include <stdio.h> #include <stdlib.h> #include <string.h& ...

  4. Web移动前端开发-——rem+less+媒体查询，rem+flexble.js+媒体查询

    实际开发搞搞起来!!!! rem适配方案 媒体查询+rem+less 基础知识铺垫 第一步,我们需要拿到设计稿,安装设计稿的要求来设置一个合适的html字体大小. 第二步,计算元素大小的取值 页面re ...

  5. tomcat-jvm内存问题

    http://www.360doc.com/content/14/0617/12/114824_387440563.shtml http://27091497.blog.163.com/blog/st ...

  6. Python MongoDB 创建数据库

    章节 Python MySQL 入门 Python MySQL 创建数据库 Python MySQL 创建表 Python MySQL 插入表 Python MySQL Select Python M ...

  7. MyBatis从入门到精通(第3章)：MyBatis注解方式的基本使用

    MyBatis 注解方式就是将 SQL 语句直接写在DAO层的接口上. 在黑马录制的2018年双元视频课:\08 SSM整合案例[企业权限管理系统]\07.订单操作  有使用MyBatis注解进行多表 ...

  8. vue学习（十）mixin 偷懒

    一 mixin混入偷懒技术 架子 <div id="app"> {{msg}} </div> <script> let app = new Vu ...

  9. ssh-keygen 签名ca证书

    介绍 ssh-keygen命令用于为"ssh" 生成,管理和转换认证秘钥,支持RSA和DSA两种认证秘钥 生成秘钥对 ssh-keygen -b 2048 -C milo -f 2 ...

  10. js对象等号赋值的bug

    var a = {n: 1}; var b = a; a.x = a = {n: 2}; console.log(a.x); console.log(b.x); 有道题是这样的,觉得很奇葩,分析一下 ...