js流程控制，多线程，setTimeout/setInterval，LazyMan实现

为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。
为了理解Web Worker是如何工作的，举个栗子：

    
        
        
    
    
        
        start
        stop
        alert
        
    

下面是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

参考文献：

1. JavaScript 运行机制详解：再谈Event Loop
2. 深入理解JavaScript定时机制
3. How JavaScript Timers Work
4. 谈谈Javascript线程
5. 从setTimeout谈JavaScript运行机制