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 ...
随机推荐
- PHP时间格式
date 用法: date(格式,[时间]); 如果没有时间参数,则使用当前时间.格式是一个字符串,其中以下字符有特殊意义: Y - 年,四位数字; 如: "1999" y - 年 ...
- CSS层级关系 学习笔记
CSS 文档流 格式化上下文 Formatting Context 即初始元素定义的环境 块格式化上下文 Block Formatting Context BFC 行内格式化上下文 ...
- dede开启会员功能
登陆后台,找到菜单里面的系统基本参数设置>会员设置>开启会员功能,选择“是”,保存即可
- 指令——free
free指令 一个完整的指令的标准格式: Linux通用的格式——#指令主体(空格) [选项](空格) [操作对象] 一个指令可以包含多个选项,操作对象也可以是多个. free指令作用:查看内存使用情 ...
- PyTorch自动微分基本原理
序言:在训练一个神经网络时,梯度的计算是一个关键的步骤,它为神经网络的优化提供了关键数据.但是在面临复杂神经网络的时候导数的计算就成为一个难题,要求人们解出复杂.高维的方程是不现实的.这就是自动微分出 ...
- 002、将mysql用作一个简单的计算器
SELECT PI( ), , ( ) ; 不忘初心,如果您认为这篇文章有价值,认同作者的付出,可以微信二维码打赏任意金额给作者(微信号:382477247)哦,谢谢.
- 《新标准C++程序设计》4.1(C++学习笔记12)
运算符重载的概念和原理 一.运算符重载的需求 C++预定义的“+.-. * ./.%. ^ .&.~.!.|. = .<< >>.!= ”等运算符,只能用于基本数据类型 ...
- 《新标准C++程序设计》3.8(C++学习笔记10)
友元 友元分为友元函数和友元类两种. 一.友元函数 在定义一个类的时候,可以把一些函数(包括全局函数和其它类的成员函数)声明为“友元”,这样那些函数就成为该类的友元函数,在友元函数内部就可以访问该类对 ...
- Vue.js(23)之 keepAlive和activated
阅读: vue中前进刷新.后退缓存用户浏览数据和浏览位置的实践 keep-alive 组件级缓存 keep-alive <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而 ...
- webpack散记---提取公共代码
(1)作用: 减少代码冗余 提高加载速度 (2)来源 commonsChunkPlugin webpack.optimize.CommonsChunkPlugin (3)配置 { plugins:[ ...