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 ...
随机推荐
- python手动实现深拷贝
深拷贝是将对象全拷贝,包括嵌套对象 def deepcopy(cls): if isinstance(cls, dict): dct = {} for k, v in cls.items(): dct ...
- 解决fedora28桌面图标问题
正文 在fedora28中默认是没有桌面图标的,对于那些习惯使用桌面的图标的人来说使用有点不适应. 替代方法是: 下载nemo,在终端内输入sudo dnf install nemo 创建~/.con ...
- 使用Python绘制漫步图
代码如下: import matplotlib.pyplot as plt from random import choice class RandomWalk(): def __init__(sel ...
- 微服务框架中springboot启动的一个问题
微服务中,采用的是springboot构建单个项目,其中一个项目user启动过程中总是启动补起来,相关的地方都没有错,始终启动不起来,而且要命的是控制台不打印日志,日志级别是debug级别的,但是打印 ...
- mybatis update set 多个字段
<update id="updateCustomer" parameterType="com.entrym.domain.Customer"> UP ...
- 第四篇：Vue的项目开发
安装Vue的脚手架cli环境 1)官网下载并安装node,附带npm https://nodejs.org/zh-cn/ node环境: 可以解释执行js语言 提供了npm应用商城,可以为node环境 ...
- 071-PHP数组合并
<?php $arr1=array('a','b','c'); //定义一个数组 echo '数组$arr1的信息:<br />'; print_r($arr1); //输出数组信息 ...
- eclipse中svn重新设置账户
查看svn版本:windows > preference > Team > SVN 1.如果svn插件是svnkit版 只需找到.keyring文件,一般目录是:eclipse安装目 ...
- css把图片方框变为圆角
border-radius:10px; 多少就设多少像素,个人需求.
- qvector 转为数组
在 qt 中想要把 qvector 转化为原始数据构成的数组,有几种方法: 直接使用循环读取 double *bytes = new double[vec.size()]; for (int i = ...