js流程控制,多线程,setTimeout/setInterva

2017-04-14  本文已影响223人  疾风劲草ccy

为了利用多核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线程互不影响。
那么既然互不影响,两个线程之间要怎么来联系呢,答案其实已经在代码里了,那就是onPostMessageonmessage这两个函数,其中onPostMessage(data)的参数是你要传递的数据,而onmessage是一个回调函数,只有在接受到数据时,onmessage会被回调,onmessage有一个隐藏的参数,那就是event,我们可以用event.data获取到传递过来的数据来更新主线程。
参考文档:HTML5 Web Workers

栗子中,aabb前面,所以输出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运行机制
上一篇 下一篇

猜你喜欢

热点阅读