setTimeout与循环闭包经典面试题详解，JavaScript的算数运算符与比较运算符

最新推荐文章于 2024-06-20 00:29:31 发布

2401_84097745

最新推荐文章于 2024-06-20 00:29:31 发布

阅读量1k

点赞数 22

分类专栏：程序员文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2401_84097745/article/details/137372023

版权

程序员专栏收录该内容

252 篇文章 0 订阅

订阅专栏

本文详细解释了JavaScript中的setTimeout函数如何在事件循环中执行，强调了其延迟时间是相对于代码执行完毕而非调用时刻。并通过例子展示了闭包在处理setTimeout延迟执行中的关键作用，以及如何利用闭包解决for循环中的定时器问题。同时，文章提到了前端开发的学习资源和面试准备的重要性。

摘要由CSDN通过智能技术生成

队列：先进先出

而这个队列执行的时间，需要等待到函数调用栈清空之后才开始执行。即所有可执行代码执行完毕之后，才会开始执行由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();

执行结果如图所示。

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

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值并保存在闭包中。

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

(function (i) {

setTimeout(function timer() {

console.log(i);

}, i * 1000);

})(i)

}

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