一道经典面试题-----setTimeout(function(){}，0)和引发发的其它面试题

时间：2021-03-10 14:25:28

先看题：

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

 

结果是：0 1 2 3 3 3
很多公司面试都爱出这道题，此题考察的知识点还是蛮多的。 都考察了那些知识点呢？
异步、作用域、闭包。
我们来简化此题：

 setTimeout(function() {
     console.log(1);
 }, 0);
 console.log(2);   //先打印2，再打印1

 

因为是setTimeout是异步的。
正确的理解setTimeout的方式(注册事件)： 有两个参数，第一个参数是函数，第二参数是时间值。 调用setTimeout时，把函数参数，放到事件队列中。等主程序运行完，再调用。

就像我们给按钮绑定事件一样：

 btn.onclick = function() {
 　　alert(1);
 };

 

这么写完，会弹出1吗。不会！！只是绑定事件而已！ 必须等我们去触发事件，比如去点击这个按钮，才会弹出1。

setTimeout也是这样的！只是绑定事件，等主程序运行完毕后，再去调用。

setTimeout的时间值是怎么回事呢？

 setTimeout(fn, 2000)

 

程序会不会报错？ 不会！而且还会准确得打印1。为什么？ 因为真正去执行console.log(i)这句代码时，var i = 1已经执行完毕了！

所以我们进行dom操作。可以先绑定事件，然后再去写其他逻辑。

 window.onload = function() {
         fn();
 }
 var fn = function() {
         alert('hello')
 };

 

这么写，完全是可以的。因为异步！

es5中是没有块级作用域的。

for (var i = 0; i < 3; i++) {}
console.log(i); //3，也就说i可以在for循环体外访问到。所以是没有块级作用域。

 

这回我们再来看看原题。
原题使用了for循环。循环的本质是干嘛的？ 是为了方便我们程序员，少写重复代码。

原题等价于：

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

 

因为setTimeout是注册事件。根据前面的讨论，可以都放在后面。
原题又等价于如下的写法：

   var i = 0;
   console.log(i);
   i++;
   console.log(i);
   i++;
   console.log(i);
   i++;
   setTimeout(function() {
       console.log(i);
   }, 0);
   setTimeout(function() {
      console.log(i);
   }, 0);
   setTimeout(function() {
       console.log(i);
   }, 0);  //弹出 0 1 2 3 3 3

 

怎么保证能弹出0，1， 2呢？

for (var i = 0; i < 3; i++) {
      setTimeout((function(i) {
          return function() {
              console.log(i);
          };
      })(i), 0);  //改为立即执行的函数
      console.log(i);  
  }

 

就可以打印出来了。

 

接下来聊聊

引发的面试题

for (var i = 0; i < 5; i++) {
    console.log(i);
    setTimeout(function () {
        console.log(i)    //5个10
        var timestamp = Date.parse(new Date());
        console.log(timestamp);
    }, i*1000);
}

结果打印：0，1，2，3，4，5，5，5，5，5
好奇的是为什么不是5s后一次打印或则每5s打印一次
查了一些资料看得比较明白的是下面的理解：
setTimeout是一次执行函数，这里是i*1s后执行，仅仅执行一次；for（var i=0;i<5;i++）,i的每次取值都是执行setTimeout这个函数，并没有执行setTimeout里面的function（即闭包函数）,
setTimeout里面的function是有setTimeout的定时触动的，也就是i*1s后执行，也就是说i从0~5时，一共执行了5次的setTimeout()函数，此时的i的值是5，
由于for语句的执行速度远小于1s，所以,1s后，由setTimeout()函数定时触动的闭包函数function()开始执行，alert(i);i的值已经是5了，所以相继打印5次5
外加老姚的回答：
setTimeout(fn, time)，首先这是个函数setTimeout执行，他是同步执行的。表示的意思是告诉浏览器，time时间后，要执行fn，只是“告诉”而已。
time时间后，浏览器把fn插入事件队列中，如果插入时，事件队列时空的，那么fn就立即执行了。因为fn在setTimeout执行完毕之后才执行的，因此是异步的，即异步回调。
而setTimeout(fn, 1000 * i)可以写成
var j = 1000 * i；
setTimeout(fn, j)
因此是同步执行的。
fn中的i，是闭包中的i，始终拿到i最新的保存值的，而轮到fn执行时，i已经累加成了5了。

 

标签：

相关文章