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 ...
随机推荐
- SwiftUI中多设备运行方法
https://blog.csdn.net/weixin_42679753/article/details/94465674 https://www.jianshu.com/p/17fc7929fcb ...
- day09 Django: 组件cookie session
day09 Django: 组件cookie session 一.cookie和session都是会话跟踪技术 1.什么是会话 可以理解为客户端和服务端之间的一次会 ...
- 2020/2/22 74cms3.5.1 代码审计
0x00 网站结构 简单试了一下.每一个模块还是比较清楚的,分别对应网站的一个模块.还有一些没有权限访问 0x01 通读代码 先看入口文件,index.php 开头先对网站是否安装做了判断 然后就是判 ...
- Golang的标准输入输出
Golang的标准输入输出 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在很多情况下,我们希望用户通过键盘输入一个数值,存储到某个变量中,然后将该变量的值取出来,进行操作.这时候 ...
- c#查看本机网络端口和对应的程序名
360安全卫士里面有个组件叫流量防火墙,感觉挺好用,但是不想安装360全家桶,于是自己捣鼓着用C#写一个比较简化的版本. 查看电脑上开启的TCP或UDP端口,可以用netstat命令,netstat用 ...
- Python基础笔记：字符串和编码
1. 当处理文本时,需要现将文本转换为文字,一个字节为8位儿,一个字节最高表示整数255(1111 1111),对应255个状态: 最为人熟知的是ASCii码,ASCii码含128个状态,满足了英文编 ...
- raspberry pi-php-exec
遇到的问题是在树莓派上搭建的web服务器,想通过网页操控树莓派的gpio,网页是通过php实现的,通过php的exec函数调用写好的程序实现对gpio的操作,但是赖何没有效果,分析也知道是权限问题,最 ...
- 我的Java语言学习日志1_"简单的银行管理系统实现"
设计步骤:注意:本篇代码,直接建两个类( Bank_Account.BankManage)在BankManage往里面填方法就行.是为了让和我一样自学朋友可以更快的接受.但是代码优化的空间还是很大的( ...
- StackExchange.Redis.DLL 操作redis加强版
直接引用StackExchange.Redis.dll这一个dll来操作redis App.config配置 <?xml version="1.0" encoding=&qu ...
- 【转载】webdriver 自动化测试如何定位到动态变化ID的iframe框内
大家知道,在自动化测试脚本编写过程中,如果页面上跳出一个iframe框时,我们是定位不到框内内容的,可以通过 driver.findElement(By.id("")); driv ...