参考大神：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. Python 3.8 新功能【新手必学】

       Python 3.8 是 Python 编程语言的最新主要版本, 它包含许多新功能和优化.   Python 3.8 Python 3.8 的一些新功能包括: 1. 海象运算符   PS:很多人 ...

  2. 初学Java(1)

    1.Java基本数据类型: 2.Java的main方法: 被static修饰,类名与文件名相同:void:方法的返回值,无返回值:main方法是程序的入口,有且只有一个: String[] args: ...

  3. CAN编写完分帧发送， 分帧接收，J1939位域型结构体心得

    关于由多个不同的C文件构成的工程,我采用以下方法 以为400Hz数字电源程序为例 假设工程由以下文件组成 DC_Comm.c 主要完成串口通讯部分 DC_Config.c 主要完成时钟,外设 中断初始 ...

  4. 滑条滚动发请求要用Debounce

    import debounce from 'lodash.debounce'; this.deboucedFunc = debounce(this.viewModel.v_onHomeworkRequ ...

  5. Vue - slot-scope="scope" 的意义

      <template slot-scope="scope">                     <el-button type="primary ...

  6. 我为NET狂官方面试题-数据库篇答案(转)

    题目:http://www.cnblogs.com/dunitian/p/6028838.html 汇总:http://www.cnblogs.com/dunitian/p/5977425.html ...

  7. 2.13 ViewModel 使数据即使在后台被杀死数据也能存活

    操作程序如下: 主要是创建一个 SavedStateHandle 来缓存上一次的数据,并通过重新读取上一次存储的数据来实现数据的存活 MyVIewModel: package com.example. ...

  8. （转载）wchar_t类型和char类型变量相互转换

    转载连接:https://www.cnblogs.com/zhangdewang/p/11420410.html和https://www.cnblogs.com/lanhaicode/p/105742 ...

  9. 十九、JavaScript之数组

    一.代码如下 二.执行效果如下 <!DOCTYPE html> <html> <meta http-equiv="Content-Type" cont ...

  10. 四、React创建组件、 JSX使用、绑定数据、引用图片方式、数组（列表）循环输出

    接:https://www.cnblogs.com/chenxi188/p/11702799.html 用上节建好的my-app项目: my-app/ README.md node_modules/ ...