前端复习--javascript 任务队列 与 setTimeout()的深入学习

首先参考了《高程》的P203和P609：

javascript是单线程的，所以在一定时间内只能执行一段代码。为了控制代码的执行顺序，JavaScript有一个任务队列。任务会按照他们被加入队列的顺序执行。

而  SetTimeOut(任务，多久之后将此任务加入任务队列)；

下面有几个例子，可以充分说明上面的观点。

例子一：（来自阿里的笔试题）

单选题：

对于下列程序运行结果，符合预期的是

function f1() {

    console.time('time span');

}
function f2() {

    console.timeEnd('time span');

}

setTimeout(f1, 100);

setTimeout(f2, 200);

function waitForMs(n) {

    var now = Date.now();

    while (Date.now() - now < n) {}

}

waitForMs(500);

• A、time apan:700.077ms
• B、time apan:0.066ms
• C、time apan:500.077ms
• D、time apan:100.077ms

答案是B。

代码执行到setTimeout(f1,100),告诉js:  100ms后将f1加入任务队列；

代码执行到setTimeout(f2,200),告诉js:  200ms后将f2加入任务队列；

代码执行到waitForMs(500)时，js开始数数，数到100时，f1加入任务队列

                                                                               数到200时，f2加入任务队列

此时任务队列里，waitForMs(500)后面就是排着f1 , f2;

f1启动计时器，f2关闭计时器，两者的执行都很快，事件间隔不到1ms;

例子2：来自stack overflow 操作任务队列

console.clear();
console.log("a");
setTimeout(function(){console.log("b");},1000);
console.log("c");
setTimeout(function(){console.log("d");},0);

A request comes in, and JS engine starts executing the code above step by step. 

The first two calls are sync（同步） calls. 

But when it comes to setTimeout method, it becomes an async execution. But JS immediately returns from it and continue executing, which is called Non-Blocking or Async. And it continues working on other etc.

The results of this execution is the following:

a c d b

我们说过，我们要操作任务队列，动一点小手脚：

console.clear();
console.log("a");
setTimeout(function(){console.log("b");},100);
console.log("c");
function waitForMs(n) {    
	var now = Date.now();    
	while (Date.now() - now < n) {}
}     
waitForMs(500);
setTimeout(function(){console.log("d");} ,0);

a c b d

自己想想为什么把。

wait!  看看下面的代码是怎么输出的：

for ( var  i=1;i<=3;i++){

   setTimeout( function (){

       console.log(i);   

   },0); 

};

和

for(var i=1;i<=3;i++){
  (function(i){
    setTimeout(function(){
      console.log(i);   
  },0);
  })(i);
   
};