js运行流程
1. 所有代码分类
- * 初始化执行代码(同步代码): 包含绑定dom事件监听, 设置定时器, 发送ajax请求的代码
- * 回调执行代码(异步代码): 处理回调逻辑
2. js引擎执行代码的基本流程:
- * 初始化代码===>回调代码
3. 模型的2个重要组成部分:
- * 事件(定时器/DOM事件/Ajax)管理模块
- * 回调队列
4. 模型的运转流程
- * 执行初始化代码, 将事件回调函数交给对应模块管理
- * 当事件发生时, 管理模块会将回调函数及其数据添加到回调列队中
- * 只有当初始化代码执行完后(可能要一定时间), 才会遍历读取回调队列中的回调函数执行
function fn1() {
console.log('fn1()')
}
fn1()
// 5秒后将会在回调队列中加入500000个定时事件的回调函数,用来阻塞下边点击事件。
//在点击按钮前,队列前将会有一定的定时回调函数未执行,迫使点击事件的回掉函数排队
for(var i =0; i<500000;i++){
setTimeout(function () {
console.log('定时器执行了')
}, 5000)
}
document.getElementById('btn').onclick = function () {
console.log('点击了btn')
}
function fn2() {
console.log('fn2()')
}
fn2()
模型
使用Web Workers 实现多线程
1. H5规范提供了js分线程的实现, 取名为: Web Workers
2. 相关API
- * Worker: 构造函数, 加载分线程执行的js文件
- * Worker.prototype.onmessage: 用于接收另一个线程的回调函数
- * Worker.prototype.postMessage: 向另一个线程发送消息
3. 不足
- * worker内代码不能操作DOM(更新UI)
- * 不能跨域加载JS
- * 不是每个浏览器都支持这个新特性
main.js
var input = document.getElementById('number')
document.getElementById('btn').onclick = function () {
var number = input.value
//创建一个Worker对象
var worker = new Worker('worker.js')
// 绑定接收消息的监听
worker.onmessage = function (event) {
console.log('主线程接收分线程返回的数据: '+event.data)
alert(event.data)
}
// 向分线程发送消息
worker.postMessage(number)
console.log('主线程向分线程发送数据: '+number)
}
// console.log(this) // window
worker.js
function fibonacci(n) {
return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2) //递归调用
}
console.log(this)
this.onmessage = function (event) {
var number = event.data
console.log('分线程接收到主线程发送的数据: '+number)
//计算
var result = fibonacci(number)
postMessage(result)
console.log('分线程向主线程返回数据: '+result)
// alert(result) alert是window的方法, 在分线程不能调用
// 分线程中的全局对象不再是window, 所以在分线程中不可能更新界面
}