setTimeout异步加载

两道经典的面试题,直接上代码

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

会输出什么呢?先想一想,记下答案。继续下一题

复制代码
    for(var i=0; i<3; i++){
        setTimeout(function(){
            i+=i;
            console.log(i);
        },1000)
    }
    console.log(i);
复制代码

改动很少,结果却相差甚远。先公布正确答案,第一段代码输出:1,2,4,8; 第二段代码输出:3,6,12,24。

意不意外?刺不刺激?惊不惊喜?

【代码解析】

  首先,不要被定时器干扰,误以为它有延迟才会导致这样的结果,你可以尝试把延迟改成“0”或者去掉不写,结果依然相同。

  引入一个概念-->异步,脱离当前事件队列的处理程序,而且必须等到正常队列里的事件完成后才会执行。

    再来分析以上代码,

     第一个,看到setTimeout,就知道知道它会在代码块的for循环及最后一个console.log完成后才执行,而且执行三次。毫无疑问,会先输出1,此时 i 的值为 1,再开始执行setTimeout进程,分别输出2,4,8.

       第二个,需要对闭包有一定理解,js中的for循环是不存在私有作用域的,所以for循环最后结束时 i = 3,然后再执行setTimeout,依次是6,12,24.

tags: JavaScript