澳门太阳集团登录网址 9

回调执行顺序之经典闭包setTimeout面试题分析,图例详解那道setTimeout与循环闭包的经典面试题

图例详解那道setTimeout与循环闭包的经典面试题

2017/03/06 · JavaScript
· 1 评论 ·
settimeout,
闭包

原文出处: 波同学   

澳门太阳集团登录网址 1

澳门太阳集团登录网址,配图与本文无关

我在详细图解作用域链与闭包一文中的结尾留下了一个关于setTimeout与循环闭包的思考题。

利用闭包,修改下面的代码,让循环输出的结果依次为1, 2, 3, 4, 5

JavaScript

for (var i=1; i<=5; i++) { setTimeout( function timer() {
console.log(i); }, i*1000 ); }

1
2
3
4
5
for (var i=1; i<=5; i++) {
    setTimeout( function timer() {
        console.log(i);
    }, i*1000 );
}

值得高兴的是很多朋友在读了文章之后确实对闭包有了更加深刻的了解,并准确的给出了几种写法。一些朋友能够认真的阅读我的文章并且一个例子一个例子的上手练习,这种认可对我而言真的非常感动。但是也有一些基础稍差的朋友在阅读了之后,对于这题的理解仍然感到困惑,因此应一些读者老爷的要求,借此文章专门对setTimeout进行一个相关的知识分享,愿大家读完之后都能够有新的收获。

在最初学习setTimeout的时候,我们很容易知道setTimeout有两个参数,第一个参数为一个函数,我们通过该函数定义将要执行的操作。第二个参数为一个时间毫秒数,表示延迟执行的时间。

setTimeout(function() { console.log(‘一秒钟之后我将被打印出来’) }, 1000)

1
2
3
setTimeout(function() {
    console.log(‘一秒钟之后我将被打印出来’)
}, 1000)

澳门太阳集团登录网址 2

上例执行结果

可能不少人对于setTimeout的理解止步于此,但还是有不少人发现了一些其他的东西,并在评论里提出了疑问。比如上图中的这个数字7,是什么?

每一个setTimeout在执行时,会返回一个唯一ID,上图中的数字7,就是这个唯一ID。我们在使用时,常常会使用一个变量将这个唯一ID保存起来,用以传入clearTimeout,清除定时器。

var timer = setTimeout(function() {
console.log(‘如果不清除我,我将会一秒之后出现。’); }, 1000)
clearTimeout(timer); // 清除之后,通过setTimeout定义的操作并不会执行

1
2
3
4
5
var timer = setTimeout(function() {
    console.log(‘如果不清除我,我将会一秒之后出现。’);
}, 1000)
 
clearTimeout(timer);  // 清除之后,通过setTimeout定义的操作并不会执行

接下来,我们还需要考虑另外一个重要的问题,那就是setTimeout中定义的操作,在什么时候执行?为了引起大家的重视,我们来看看下面的例子。

var timer = setTimeout(function() { console.log(‘setTimeout actions.’);
}, 0); console.log(‘other actions.’); //
思考一下,当我将setTimeout的延迟时间设置为0时,上面的执行顺序会是什么?

1
2
3
4
5
6
7
var timer = setTimeout(function() {
    console.log(‘setTimeout actions.’);
}, 0);
 
console.log(‘other actions.’);
 
// 思考一下,当我将setTimeout的延迟时间设置为0时,上面的执行顺序会是什么?

在浏览器中的console中运行试试看,很容易就能够知道答案,如果你没有猜中答案,那么我这篇文章就值得你点一个赞了,因为接下来我分享的小知识,可能会在笔试中救你一命。

在对于执行上下文的介绍中,我与大家分享了函数调用栈这种特殊数据结构的调用特性。在这里,将会介绍另外一个特殊的队列结构,页面中所有由setTimeout定义的操作,都将放在同一个队列中依次执行。

我用下图跟大家展示一下队列数据结构的特点。

澳门太阳集团登录网址 3

队列:先进先出

而这个队列执行的时间,需要等待到函数调用栈清空之后才开始执行。即所有可执行代码执行完毕之后,才会开始执行由setTimeout定义的操作。而这些操作进入队列的顺序,则由设定的延迟时间来决定。

因此在上面这个例子中,即使我们将延迟时间设置为0,它定义的操作仍然需要等待所有代码执行完毕之后才开始执行。这里的延迟时间,并非相对于setTimeout执行这一刻,而是相对于其他代码执行完毕这一刻。所以上面的例子执行结果就非常容易理解了。

为了帮助大家理解,再来一个结合变量提升的更加复杂的例子。如果你能够正确看出执行顺序,那么你对于函数的执行就有了比较正确的认识了,如果还不能,就回过头去看看其他几篇文章。

setTimeout(function() { console.log(a); }, 0); var a = 10;
console.log(b); console.log(fn); var b = 20; function fn() {
setTimeout(function() { console.log(‘setTImeout 10ms.’); }, 10); }
fn.toString = function() { return 30; } console.log(fn);
setTimeout(function() { console.log(‘setTimeout 20ms.’); }, 20); fn();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
setTimeout(function() {
    console.log(a);
}, 0);
 
var a = 10;
 
console.log(b);
console.log(fn);
 
var b = 20;
 
function fn() {
    setTimeout(function() {
        console.log(‘setTImeout 10ms.’);
    }, 10);
}
 
fn.toString = function() {
    return 30;
}
 
console.log(fn);
 
setTimeout(function() {
    console.log(‘setTimeout 20ms.’);
}, 20);
 
fn();

澳门太阳集团登录网址 4

上栗执行结果

OK,关于setTimeout就暂时先介绍到这里,我们回过头来看看那个循环闭包的思考题。

JavaScript

for (var i=1; i<=5; i++) { setTimeout( function timer() {
console.log(i); }, i*1000 ); }

1
2
3
4
5
for (var i=1; i<=5; i++) {
    setTimeout( function timer() {
        console.log(i);
    }, i*1000 );
}

如果我们直接这样写,根据setTimeout定义的操作在函数调用栈清空之后才会执行的特点,for循环里定义了5个setTimeout操作。而当这些操作开始执行时,for循环的i值,已经先一步变成了6。因此输出结果总为6。而我们想要让输出结果依次执行,我们就必须借助闭包的特性,每次循环时,将i值保存在一个闭包中,当setTimeout中定义的操作执行时,则访问对应闭包保存的i值即可。

而我们知道在函数中闭包判定的准则,即执行时是否在内部定义的函数中访问了上层作用域的变量。因此我们需要包裹一层自执行函数为闭包的形成提供条件。

因此,我们只需要2个操作就可以完成题目需求,一是使用自执行函数提供闭包条件,二是传入i值并保存在闭包中。

JavaScript

for (var i=1; i<=5; i++) { (function(i) { setTimeout( function
timer() { console.log(i); }, i*1000 ); })(i) }

1
2
3
4
5
6
7
8
for (var i=1; i<=5; i++) {
 
    (function(i) {
        setTimeout( function timer() {
            console.log(i);
        }, i*1000 );
    })(i)
}

澳门太阳集团登录网址 5

利用断点调试,在chrome中查看执行顺序与每一个闭包中不同的i值

当然,也可以在setTimeout的第一个参数处利用闭包。

JavaScript

for (var i=1; i<=5; i++) { setTimeout( (function(i) { return
function() { console.log(i); } })(i), i*1000 ); }

1
2
3
4
5
6
7
for (var i=1; i<=5; i++) {
    setTimeout( (function(i) {
        return function() {
            console.log(i);
        }
    })(i), i*1000 );
}

1 赞 6 收藏 1
评论

澳门太阳集团登录网址 6

1、先理解一下作用域

如果我们初始化一个变量,比如:var a = 1;参与这段代码执行的几个角色包括:

引擎:从头到尾负责整个JavaScript程序的编译和执行

编译器:负责词法分析、语法分析及代码生成等任务

作用域:负责收集并维护由所有声明的标识符(变量)组成的一系列查询,并实施一套非常严格的规则,确定当前执行的代码对这些标识符的访问权限

对于var a =
1;这段程序,引擎认为这里有两个完全不同的声明,一个在编译器编译时处理,另一个在引擎运行时处理。

首先编译器会将这段程序分解为词法单元,然后将词法单元解析成一个树结构,在代码生成阶段进行如下处理:

1.遇到var
a,编译器会先询问作用域中是否已经存在该名称的变量,如果是,会忽略该声明继续编译;如果否,会要求作用域在当前作用域集合中声明一个名为a的变量。

2.之后编译器会为引擎生成在运行时需要的代码,这些代码用来处理a =
2这个赋值操作。引擎运行时先问作用域是否有改变量,如果有则使用,如果没有,则向上一级作用域中查找。

如果引擎最终找到了a,就把1赋值给它,如果没有,就会抛出异常。

总结:变量的赋值操作会执行两个动作,首先编译器会在当前作用域中声明一个变量,然后在运行时引擎会查找该变量,如果有则对它赋值。

作用域是根据名称查找变量的一套规则,而作用域链是这套规则的具体实现

JavaScript同步、异步、回调执行顺序之经典闭包setTimeout面试题分析

2017/04/04 · JavaScript
· 1 评论 ·
React,
同步,
回调,
异步,
闭包

原文出处: hyy1115   

同步、异步、回调?傻傻分不清楚。

大家注意了,教大家一道口诀:

同步优先、异步靠边、回调垫底(读起来不顺)

用公式表达就是:

同步 => 异步 => 回调

这口诀有什么用呢?用来对付面试的。

有一道经典的面试题:

JavaScript

for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(‘i:
‘,i); }, 1000); } console.log(i); //输出 5 i: 5 i: 5 i: 5 i: 5 i: 5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(‘i: ‘,i);
    }, 1000);
}
 
console.log(i);
 
//输出
5
i:  5
i:  5
i:  5
i:  5
i:  5

这道题目大家都遇到过了吧,那么为什么会输出这个呢?记住我们的口诀 同步
=> 异步 => 回调

1、for循环和循环体外部的console是同步的,所以先执行for循环,再执行外部的console.log。(同步优先)

2、for循环里面有一个setTimeout回调,他是垫底的存在,只能最后执行。(回调垫底)

那么,为什么我们最先输出的是5呢?

非常好理解,for循环先执行,但是不会给setTimeout传参(回调垫底),等for循环执行完,就会给setTimeout传参,而外部的console打印出5是因为for循环执行完成了。

知乎有大神讲解过 80% 应聘者都不及格的 JS
面试题
,就是以这个例子为开头的。但是没有说为什么setTimeout是输出5个5。

这里涉及到JavaScript执行栈和消息队列的概念,概念的详细解释可以看阮老师的
JavaScript 运行机制详解:再谈Event Loop –
阮一峰的网络日志,或者看
并发模型与Event
Loop

澳门太阳集团登录网址 7

《图片来自于MDN官方》

我拿这个例子做一下讲解,JavaScript单线程如何处理回调呢?JavaScript同步的代码是在堆栈中顺序执行的,而setTimeout回调会先放到消息队列,for循环每执行一次,就会放一个setTimeout到消息队列排队等候,当同步的代码执行完了,再去调用消息队列的回调方法。

在这个经典例子中,也就是说,先执行for循环,按顺序放了5个setTimeout回调到消息队列,然后for循环结束,下面还有一个同步的console,执行完console之后,堆栈中已经没有同步的代码了,就去消息队列找,发现找到了5个setTimeout,注意setTimeout是有顺序的。

那么,setTimeout既然在最后才执行,那么他输出的i又是什么呢?答案就是5。。有人说不是废话吗?

现在告诉大家为什么setTimeout全都是5,JavaScript在把setTimeout放到消息队列的过程中,循环的i是不会及时保存进去的,相当于你写了一个异步的方法,但是ajax的结果还没返回,只能等到返回之后才能传参到异步函数中。
在这里也是一样,for循环结束之后,因为i是用var定义的,所以var是全局变量(这里没有函数,如果有就是函数内部的变量),这个时候的i是5,从外部的console输出结果就可以知道。那么当执行setTimeout的时候,由于全局变量的i已经是5了,所以传入setTimeout中的每个参数都是5。很多人都会以为setTimeout里面的i是for循环过程中的i,这种理解是不对的。

===========================================分割线=========================================

看了上面的解释,你是不是有点头晕,没事,继续深入讲解。

我们给第一个例子加一行代码。

JavaScript

for (var i = 0; i < 5; ++i) { setTimeout(function() { console.log(‘2:
‘,i); }, 1000); console.log(‘1: ‘, i); //新加一行代码 } console.log(i);
//输出 1: 0 1: 1 1: 2 1: 3 1: 4 5 2: 5 2: 5 2: 5 2: 5 2: 5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
for (var i = 0; i < 5; ++i) {
    setTimeout(function() {
        console.log(‘2: ‘,i);
    }, 1000);
    console.log(‘1: ‘, i); //新加一行代码
}
 
console.log(i);
 
//输出
1:  0
1:  1
1:  2
1:  3
1:  4
5
2:  5
2:  5
2:  5
2:  5
2:  5

来,大家再跟着我一起念一遍:同步 => 异步 => 回调 (强化记忆)

这个例子可以很清楚的看到先执行for循环,for循环里面的console是同步的,所以先输出,for循环结束后,执行外部的console输出5,最后再执行setTimeout回调
55555。。。

=====================================分割线============================================

这么简单,不够带劲是不是,那么面试官会问,怎么解决这个问题?

最简单的当然是let语法啦。。

JavaScript

for (let i = 0; i < 5; ++i) { setTimeout(function() { console.log(‘2:
‘,i); }, 1000); } console.log(i); //输出 i is not defined 2: 0 2: 1 2: 2
2: 3 2: 4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
for (let i = 0; i < 5; ++i) {
    setTimeout(function() {
        console.log(‘2: ‘,i);
    }, 1000);
}
 
console.log(i);
 
//输出
i is not defined
2:  0
2:  1
2:  2
2:  3
2:  4

咦,有同学问,为什么外部的i报错了呢?
又有同学问,你这个口诀在这里好像不适应啊?

let是ES6语法,ES5中的变量作用域是函数,而let语法的作用域是当前块,在这里就是for循环体。在这里,let本质上就是形成了一个闭包。也就是下面这种写法一样的意思。如果面试官对你说用下面的这种方式,还有let的方式,你可以严肃的告诉他:这就是一个意思!这也就是为什么有人说let是语法糖。

JavaScript

var loop = function (_i) { setTimeout(function() { console.log(‘2:’,
_i); }, 1000); }; for (var _i = 0; _i < 5; _i++) { loop(_i); }
console.log(i);

1
2
3
4
5
6
7
8
9
10
11
var loop = function (_i) {
    setTimeout(function() {
        console.log(‘2:’, _i);
    }, 1000);
};
 
for (var _i = 0; _i < 5; _i++) {
    loop(_i);
}
 
console.log(i);

面试官总说闭包、闭包、闭包,什么是闭包?后面再讲。

写成ES5的形式,你是不是发现就适合我说的口诀了?而用let的时候,你发现看不懂?那是因为你没有真正了解ES6的语法原理。

我们来分析一下,用了let作为变量i的定义之后,for循环每执行一次,都会先给setTimeout传参,准确的说是给loop传参,loop形成了一个闭包,这样就执行了5个loop,每个loop传的参数分别是0,1,2,3,4,然后loop里面的setTimeout会进入消息队列排队等候。当外部的console执行完毕,因为for循环里的i变成了一个新的变量
_i ,所以在外部的console.log(i)是不存在的。

现在可以解释闭包的概念了:当内部函数以某一种方式被任何一个外部函数作用域访问时,一个闭包就产生了。

我知道你又要我解释这句话了,loop(_i)是外部函数,setTimeout是内部函数,当setTimeout被loop的变量访问的时候,就形成了一个闭包。(别说你又晕了😓)

随便举个新的例子。

JavaScript

function t() { var a = 10; var b = function() { console.log(a); } b(); }
t(); //输出 10

1
2
3
4
5
6
7
8
function t() {
    var a = 10;
    var b = function() {
        console.log(a);    
    }
    b();
}
t(); //输出 10

跟我一起念口诀:同步 => 异步 => 回调 (强化记忆)
先执行函数t,然后js就进入了t内部,定义了一个变量,然后执行函数b,进入b内部,然后打印a,这里都是同步的代码,没什么异议,那么这里怎么解释闭包:函数t是外部函数,函数b是内部函数,当函数b被函数t的变量访问的时候,就形成了闭包。

========================================分割线==============================================

上面主要讲了同步和回调执行顺序的问题,接着我就举一个包含同步、异步、回调的例子。

JavaScript

let a = new Promise( function(resolve, reject) { console.log(1)
setTimeout(() => console.log(2), 0) console.log(3) console.log(4)
resolve(true) } ) a.then(v => { console.log(8) }) let b = new
Promise( function() { console.log(5) setTimeout(() => console.log(6),
0) } ) console.log(7)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let a = new Promise(
  function(resolve, reject) {
    console.log(1)
    setTimeout(() => console.log(2), 0)
    console.log(3)
    console.log(4)
    resolve(true)
  }
)
a.then(v => {
  console.log(8)
})
 
let b = new Promise(
  function() {
    console.log(5)
    setTimeout(() => console.log(6), 0)
  }
)
 
console.log(7)

看到这个例子,千万不要害怕😨,先读一遍口诀:同步 => 异步 =>
回调
(强化记忆)

1、看同步代码:a变量是一个Promise,我们知道Promise是异步的,是指他的then()和catch()方法,Promise本身还是同步的,所以这里先执行a变量内部的Promise同步代码。(同步优先)

JavaScript

console.log(1) setTimeout(() => console.log(2), 0) //回调
console.log(3) console.log(4)

1
2
3
4
console.log(1)
setTimeout(() => console.log(2), 0) //回调
console.log(3)
console.log(4)

2、Promise内部有4个console,第二个是一个setTimeout回调(回调垫底)。所以这里先输出1,3,4回调的方法丢到消息队列中排队等着。

3、接着执行resolve(true),进入then(),then是异步,下面还有同步没执行完呢,所以then也滚去消息队列排队等候。(真可怜)(异步靠边)
4、b变量也是一个Promise,和a一样,执行内部的同步代码,输出5,setTimeout滚去消息队列排队等候。

5、最下面同步输出7。

6、同步的代码执行完了,JavaScript就跑去消息队列呼叫异步的代码:异步,出来执行了。这里只有一个异步then,所以输出8。

7、异步也over,轮到回调的孩子们:回调,出来执行了。这里有2个回调在排队,他们的时间都设置为0,所以不受时间影响,只跟排队先后顺序有关。则先输出a里面的回调2,最后输出b里面的回调6。

8、最终输出结果就是:1、3、4、5、7、8、2、6。

我们还可以稍微做一点修改,把a里面Promise的 setTimeout(() =>
console.log(2), 0)改成 setTimeout(() => console.log(2),
2),对,时间改成了2ms,为什么不改成1试试呢?1ms的话,浏览器都还没有反应过来呢。你改成大于或等于2的数字就能看到2个setTimeout的输出顺序发生了变化。所以回调函数正常情况下是在消息队列顺序执行的,但是使用setTimeout的时候,还需要注意时间的大小也会改变它的顺序。

====================================分割线==================================================

口诀不一定是万能的,只能作为一个辅助,更重要的还是要理解JavaScript的运行机制,才能对代码执行顺序有清晰的路线。

还有async/await等其他异步的方案,不管是哪种异步,基本都适用这个口诀,对于新手来说,可以快速读懂面试官出的js笔试题目。以后再也不用害怕做笔试题啦。

特殊情况下不适应口诀的也很正常,JavaScript博大精深,不是一句话就能概括出来的。

最后,在跟着我念一遍口诀:同步 => 异步 => 回调

2 赞 3 收藏 1
评论

澳门太阳集团登录网址 6

2、作用域链

作用域链在执行上下文的创建阶段生成,是由当前环境以及上层环境的一系列变量对象组成。它的作用是保证对执行环境有权访问的所有变量和函数的有序访问。

标识符的解析是沿着作用域链一级一级向上查找作用域的过程,查找始终从作用域开始,找到则停止,否则一直向上查找,知道全局作用域,即作用域链的末尾。

通过一个例子理解一下:

var color = “blur”;

function changeColor() {

    var anotherColor = “red”;

    function swapColor() {   

        var tempColor = anotherColor;

        anotherColor = color;

        color = tempColor;

    }

}

以上代码共涉及三个执行环境:全局环境、changeColor的局部环境和swapColor的局部环境。通过图来展示作用域链:

澳门太阳集团登录网址 9

内部环境可以通过作用域链访问所有外部环境中的变量和函数,但是外部环境不能访问内部环境。

闭包跟作用域链息息相关,下面就来介绍一下闭包。

3、闭包

闭包的概念:当函数可以记住并访问所在的作用域(全局作用域除外)时,就产生了闭包,即使函数是在当前作用域之外执行的。简单来说,就是一个函数中又声明了一个函数,就产生了闭包。

function changeColor() {

    var anotherColor = “red”;

    function swapColor() {

        console.log(anotherColor);

    }

    return swapColor;

}

var fn = changeColor();

这样代码执行时,就把swapColor的引用复制给了全局变量fn,而函数的执行上下文,在执行完毕生命周期结束之后,执行上下文就会失去引用,进而其占用的内存空间被垃圾回收器释放。但是闭包的存在,打破了这种现象,因为swapColor的引用并没有被释放。所以闭包很容易造成内存泄漏的问题。

如何让下面的代码输出1,2,3,4,5

for(vari=1;i<=5;i++){

setTimeout(functiontimer(){

console.log(i);

},0);

}

  1. 使用中间变量承接一下

function fn(i) {

console.log(i);

}

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

setTimeout( fn(i), 0 );

}

通过传入实参缓存循环的数据,并且setTimeout的第一个参数是立即执行的函数,不执行不可以。

2、使用立即执行函数

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

setTimeout( (function timer() {

console.log(i);

})(), 0 );

}

3、用let或const声明

for (let i=1; i<=5; i++) {

setTimeout( function timer() {

console.log(i);

}, 0 );

}

这个问题的主要原因是因为执行到setTimeOut时函数没有执行,而是把它放到了任务队列中,等到for循环结束后再执行。所以i最后都变成了5。

循环中的事件也会有这个问题,因为事件需要触发,大多数时候事件触发的时候循环已经执行完了,所以循环相关的变量就变成了最后一次的值。

发表评论

电子邮件地址不会被公开。 必填项已用*标注