为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。
为了理解Web Worker是如何工作的，举个栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>worker</title>
</head>
<body>
<input type="text" name="ipt" id="ipt" value="" />
<button id="start">start</button>
<button id="stop">stop</button>
<button id="ale">alert</button>
<script type="text/javascript">
var ipt = document.getElementById("ipt");
var stop = document.getElementById("stop");
var start = document.getElementById("start");
var ale = document.getElementById("ale");
var worker = new Worker("test22.js");
worker.onmessage = function(){
ipt.value = event.data;
};
stop.addEventListener("click",function(){
//用于关闭worker线程
worker.terminate();
});
start.addEventListener("click",function(){
//开起worker线程
worker = new Worker("test22.js");
});
ale.addEventListener("click",function(){ //点击事件会插入主线程
alert("i'm a dialog"); //alert阻塞了主线程
console.log("waiting");
setTimeout(function(){
console.log("waited for 5 seconds");
},5000)
});
var aa = setTimeout(function(){
console.log("Is 5 seconds.");
},5000)
var index = 0;
var bb = setInterval(function(){
index++;
console.log(index);
},1000)
</script>
</body>
</html>
下面是test22.js里的代码，也就是存在于worker线程里的代码
var i = 0;
function mainFunc(){
i++;
//把i发送到浏览器的js引擎线程里
postMessage(i);
}
var id = setInterval(mainFunc,1000);
运行起来我们会发现
点击确定后，它的数值并非2，而是一个比2更大的数
虽然dialog的弹出会阻塞js引擎线程，但是并不影响worker线程的运行，所以，在我们点击确定后，只是在js引擎线程上更新了新的内容，而数值是一直在跑动的，这就说明worker线程和原本的js线程互不影响。
那么既然互不影响，两个线程之间要怎么来联系呢，答案其实已经在代码里了，那就是onPostMessage 和 onmessage这两个函数，其中onPostMessage（data）的参数是你要传递的数据，而onmessage是一个回调函数，只有在接受到数据时，onmessage会被回调，onmessage有一个隐藏的参数，那就是event，我们可以用event.data获取到传递过来的数据来更新主线程。
参考文档：HTML5 Web Workers
栗子中，aa在bb前面，所以输出aa也就在bb前面；如果它们位置对调，结果也将相反。
设定一个5000ms后执行的定时器不代表代码会在5000ms之后执行，而是指代码会在5000ms后加入到代码队列中。只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会不断重复。当循环到5000ms时，aa先加入，所以先执行。
如果将setTimeout()的第二个参数设为0，就表示当前代码执行完（执行栈清空）以后，立即执行（0毫秒间隔）指定的回调函数。
setTimeout(function(){
console.log(1);
}, 0);
console.log(2);
上面代码的执行结果总是2,1，因为只有在执行完第二行以后，系统才会去执行"任务队列"中的回调函数。
下面我们来看一个很有意思的面试题：
实现一个LazyMan，可以按照以下方式调用:
LazyMan(“Hank”)输出:
Hi! This is Hank!
LazyMan(“Hank”).sleep(10).eat(“dinner”)输出
Hi! This is Hank!
//等待10秒..
Wake up after 10
Eat dinner~
LazyMan(“Hank”).eat(“dinner”).eat(“supper”)输出
Hi This is Hank!
Eat dinner~
Eat supper~
LazyMan(“Hank”).sleepFirst(5).eat(“supper”)输出
Wake up after 5
//等待5秒
Hi This is Hank!
Eat supper
以此类推。
这道题目是典型的考JavaScript流程控制，参考答案如下：
var _LazyMan = function(name){
this.tasks = [];
var self = this;
var fn =(function(n){
var name = n;
return function(){
console.log("Hi! This is " + name + "!");
self.next();
}
})(name);
this.tasks.push(fn);
setTimeout(function(){
//console.log(this); //这里的this指向window
console.log(self.tasks); //任务队列开始执行时，已经排好队列。
self.next(); //开始执行第一个
}, 0); // 在下一个事件循环启动任务
}
_LazyMan.prototype.next = function() {
var fn = this.tasks.shift(); //去掉事件流第一个事件，并返回第一个事件
fn && fn(); //执行这个事件
}
_LazyMan.prototype.eat = function(timer){
var self = this;
var fn =(function(name){
return function(){
console.log("Eat " + name + "~");
self.next() //执行下一个
}
})(name);
this.tasks.push(fn);
return this; // 实现链式调用
}
_LazyMan.prototype.sleep = function(time){
var self = this;
var fn = (function(time){
return function(){
console.log("Wake up after " + time + "s!");
setTimeout(function(){
self.next();
},time*1000);
}
})(time);
this.tasks.push(fn);
return this;
}
_LazyMan.prototype.sleepFirst = function(time){
var self = this;
var fn = (function(time){
return function(){
console.log("Wake up after " + time + "s!");
setTimeout(function(){
self.next();
},time*1000);
}
})(time);
this.tasks.unshift(fn);
return this;
}
function LazyMan(name){
return new _LazyMan(name);
}
//test
LazyMan('Hank').sleepFirst(3).eat('supper').sleep(5).eat("dinner");
//这一长段都在主线程 ，返回的是一个实例化的 LazyMan 对象，事件已经排好队了
console.log
参考文献：
网友评论