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 ...
随机推荐
- Hive Join优化经验
大表x小表 这里可以利用mapjoin,SparkSQL中也有mapjoin或者使用广播变量能达到同样效果,此处描述HQL // 开启mapjoin并设定map表大小 set hive.auto.co ...
- 吴裕雄--天生自然java开发常用类库学习笔记：正则表达式
public class RegexDemo01{ public static void main(String args[]){ String str = "1234567890" ...
- 剑指offer自学系列(四)
题目描述: 输入一个正整数数组,把数组里面所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个,例如输入数组{3,32,321},输出的最小数字为321323 题目分析: 如果采用穷举法,把 ...
- P1053 住房空置率
P1053 住房空置率 转跳点:
- 从PC厂商狠抓粉丝经济看，春天将至？
10月中旬,市场研究机构IDC发布的全球三季度PC出货量报告显示,第三季度全球个人电脑出货量总计6740万台,比去年同期下降0.9%.似乎这一数据的发布,依旧在证明着PC市场的颓势.但在这样的大背景下 ...
- JVM探秘：JVM的参数类型
本系列笔记主要基于<深入理解Java虚拟机:JVM高级特性与最佳实践 第2版>,是这本书的读书笔记. JVM的参数类型,大致可以分为标准参数.X参数.XX参数,而XX参数又可以分为Bool ...
- Mac电脑上怎么设置环境变量
https://jingyan.baidu.com/article/8065f87f47b29523312498e4.html 环境变量是电脑操作系统中常用的一些变量,作用类似于将一些常用命令所在的文 ...
- 换根dp
感觉这类问题很少?算了,还是拿出来水一下吧qwq... 首先来看一道例题:POJ3585 一句话题意:树上任意源点多汇点最大流 你看这不就是个最大流的板子题吗?我先建个图,然后跑最大流,然后,,,然后 ...
- Elasticsearch 搜索API
章节 Elasticsearch 基本概念 Elasticsearch 安装 Elasticsearch 使用集群 Elasticsearch 健康检查 Elasticsearch 列出索引 Elas ...
- spring boot配置druid连接池连接mysql
Spring Boot 集成教程 Spring Boot 介绍 Spring Boot 开发环境搭建(Eclipse) Spring Boot Hello World (restful接口)例子 sp ...