JS高级学习笔记（2）之js多线程
参考大神：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多线程的更多相关文章
- node.js day01学习笔记:认识node.js
Node.js(JavaScript,everywhere) 1.Node.js 介绍 1.1. 为什么要学习Node.js 企业需求 + 具有服务端开发经验更好 + front-end + back ...
- 转：JS高级学习笔记（8）- JavaScript执行上下文和执行栈
必看参考: 请移步:博客园 JavaScript的执行上下文 深入理解JavaScript执行上下文和执行栈 JavaScript 深入之执行上下文 写在开头 入坑前端已经 13 个月了,不能再称自己 ...
- JS高级学习笔记（6）- 事件循环
参考文章:深入理解JS引擎的执行机制 JavaScript 异步.栈.事件循环.任务队列 我的笔记:ES系列之Promise async 和 await Event Loop 前提 js ...
- JS高级学习笔记（1）- 数据类型及转换规则
必读: Javascript对象Oject的强制类型转换 JavaScript筑基篇(二)->JavaScript数据类型 聊一聊valueOf和toString 深入理解JavaScript系 ...
- JS高级学习笔记（9） 之 转：前端路由跳转基本原理
原文链接: 前端路由跳转基本原理 前述 前端三大框架Angular.React和Vue都推行单页面应用SPA开发模式,这是因为在路由切换时,替换DOM Tree中发生修改的DOM部分,来减少原来因为多 ...
- JS高级学习笔记（10） 之 js 时怎么解析HTML标签的
DOM 节点类型 浏览器渲染过程 浏览器是怎么把HTML标签语言和JavaScript联系在一起的,这就是我们常说的DOM. 浏览器中的DOM解析器把HTML翻译成对象(object),然后JavaS ...
- vue.js 源代码学习笔记 ----- core scedule.js
/* @flow */ import type Watcher from './watcher' import config from '../config' import { callHook } ...
- vue.js 源代码学习笔记 ----- core array.js
/* * not type checking this file because flow doesn't play well with * dynamically accessing methods ...
- js再学习笔记
#js再学习笔记 ##基本 1.js严格区分大小写 2.js末尾的分号可加,也可不加 3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var ...
随机推荐
- 006.Oracle数据库 , DISTINCT去掉重复项重复内容
/*Oracle数据库查询日期在两者之间*/ SELECT DISTINCT OCCUR_DATE FROM LM_FAULT WHERE ( ( OCCUR_DATE >= to_date( ...
- Kubernetes v1.17.3 CentOS8 基于kuberadm安装
1.机器配置: IP 主机名 节点类型 配置 192.168.31.32 node32 master 4核16G 192.168.31.33 node33 worker 4核16G 192.168.3 ...
- Docker commit 命令
docker commit :从容器创建一个新的镜像. 语法 docker commit [OPTIONS] CONTAINER [REPOSITORY[:TAG]] OPTIONS说明: -a :提 ...
- PIP无法使用，script文件夹为空解决
[问题]环境变量已配置,但pip.pip3无法使用,且script文件夹为空解决: 一.安装pip3 python -m ensurepip 运行完之后就pip3有了: 二.安装pip python ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-music
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- [YOLO]《YOLO9000:Better, Faster, Stronger》笔记
一.简单介绍 YOLO9000(也叫YOLO v2),主要是在YOLO v1的基础上做了改进,而且效果还是比较显著的,在原论文中,作者提到的改进大致包括两个工作: 1.检测性能上的改进,提出了YOLO ...
- bzoj 1912: [Apio2010]patrol 巡逻
呵呵呵呵呵呵,自己画图,大概半个小时,觉的连上边会成环(是不是该交仙人掌了??)然后求环不重合部分最大就好了, 结果写了一坨DP,最后写不下去了,再次扒了题解. 发现我真的是个sb. k==1,直接是 ...
- 女神说不能每张照片P的一样，所以朋友圈开三天可见，用Python一步解决
大家好,我是小三十三,一个刚恰完午饭,正在用刷网页浪费生命的蒟蒻... 一堆堆无聊八卦信息的网页内容慢慢使我的双眼模糊,一个哈欠打出了三斤老泪,就在此时我看到了一张图片: ! 是谁!是谁把我女朋友的照 ...
- 七十二、SAP中内表的修改，添加条件语句，多条目修改
一.代码如下 二.MODIFY执行前断点数据 三.查看到数据如下 四.往下单步走一步,发现有3条数据被修改 五.执行后修改如下
- 实体映射-------AutoMapper
现在有2个实体(A.B),2个实体中的部分字段是相同的,现在把A实体获取的值赋值给B实体,利用AutoMapper实体映射可以轻松解决 参考 实体中不同名称之间的映射可以这样写 Mapper.Init ...