标签:定时器 代码 JavaScript worker number Js 线程 内核 机制
********
常见浏览器和内核
IE Firefox Safari Opera Chrome
IE 内核 Trident
Firefox 内核 Gecko
Safari 内核 Webkit
Opera 内核 Blink
Chrome 内核 Chromium/Blink
****定时器****
1 定时器回调函数是分线程执行的吗?
主线程执行 js单线程
2 定时器如何实现?
事件循环模型
****Js单线程****
代码分类 初始化代码 回调代码
Js引擎执行代码的基本流程
先执行初始化代码
设置定时器
绑定监听
发送ajax请求
执行回调代码 (异步执行)
****事件循环模型****
代码分类
初始化执行代码 包含绑定dom事件监听 设置定时器 发送ajax请求
回调执行代码(异步执行) 处理回调逻辑
事件(定时器/Dom事件/Ajax事件)管理模块
****Web Worker****
Js分线程的实现
Worker 构造函数加载分线程执行的js文件
Worker.prototype.onMessage 用于接收另一个线程的回调函数
Worker.prototype.postMessage 向另一个线程发送消息
worker内部代码不能操作Dom
<input type="text" placeholder="数值" id="number">
<button id="btn">计算</button>
<script src="worker.js"></script>
// 斐波那契数列实现
// 1 1 2 3 5
var input = document.querySelector('#number')
document.querySelector('#btn').onclick = function () {
var number = input.value
// 创建一个worker对象
var worker = new Worker('worker.js')
//绑定接收消息监听
worker.onmessage = function(event){
console.log('主线程接收分线程返回的数据');
console.log(event.data)
}
//向分线程发送消息
worker.postMessage(number)
console.log('主线程向分线程发送数据:'+number)
}
//worker.js
function fibonacci(number) {
return number <= 2 ? 1 : fibonacci(number-1) + fibonacci(number-2)//递归调用
}
var onmessage = function (event) {
var number = event.data
console.log('分线程接收到主线程发送的数据:'+number)
// console.log('onMessage');
var result = fibonacci(number)
// var upper = event.data.toUpperCase()//通过event.data获得发送来的数据
// postMessage(upper)
postMessage(result)
console.log('分线程向主线程返回数据:'+result)
}
console.log(this)
//分线程中全局对象不再是window
标签:定时器,代码,JavaScript,worker,number,Js,线程,内核,机制 来源: https://blog.csdn.net/weixin_54372875/article/details/122641722
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。