经典面试题 for循环内setTimeout顺序输出的解法

TNFE 发布于2019-08-22 15:50 / 1089人阅读

摘要：这道题挺经典的，输出结果是什么呢结果是毫秒之后，输出个隔一秒输出在上乘个就行原因是，循环在主线程内，是异步方法，在任务队列里面，只有主线程执行完后，任务队列才执行，此时的值已经是，所以得到结果是个那么怎么解决呢其实思路很容易，只要每次循环把

for (var i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i)
    }, 1000);
}

这道题挺经典的，输出结果是什么呢？结果是1000毫秒之后，输出5个5（隔一秒输出在1000上乘个i就行）
原因是，for循环在主线程内，setTimeout是异步方法，在任务队列里面，只有主线程执行完后，任务队列才执行，此时i的值已经是5，所以得到结果是5个5

那么怎么解决呢？其实思路很容易，只要每次循环把当前的i值传入setTimeout内即可

方法1：使用let

for (let i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i)
    }, 1000);
}

使用let 相当于每次循环的时候都新建了1个i并为其赋值

方法2：定义函数并传值

for (var i = 0; i < 5; i++) {
    function a(i) {
        setTimeout(() => {
            console.log(i)
        }, 1000);        
    }
    a(i)
}

方法3：IIFE（立即执行函数）

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

方法4：使用闭包

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

方法5：setTimeout第三个参数传入i(是的，你没看错，setTimeout还有第三个参数)

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93800.html

JavaScript系列——JavaScript同步、异步、回调执行顺序之经典闭包setTimeou

摘要：同步异步回调傻傻分不清楚。分割线上面主要讲了同步和回调执行顺序的问题，接着我就举一个包含同步异步回调的例子。同步优先回调内部有个，第二个是一个回调回调垫底。异步也，轮到回调的孩子们回调，出来执行了。同步、异步、回调？傻傻分不清楚。大家注意了，教大家一道口诀：同步优先、异步靠边、回调垫底（读起来不顺）用公式表达就是：同步 => 异步 => 回调这口诀有什么用呢？用来对付面试的...

lewif 2019-08-29 12:21 评论0 收藏0
JavaScript系列——JavaScript同步、异步、回调执行顺序之经典闭包setTimeou

摘要：同步异步回调傻傻分不清楚。分割线上面主要讲了同步和回调执行顺序的问题，接着我就举一个包含同步异步回调的例子。同步优先回调内部有个，第二个是一个回调回调垫底。异步也，轮到回调的孩子们回调，出来执行了。同步、异步、回调？傻傻分不清楚。大家注意了，教大家一道口诀：同步优先、异步靠边、回调垫底（读起来不顺）用公式表达就是：同步 => 异步 => 回调这口诀有什么用呢？用来对付面试的...

rockswang 2019-08-20 15:32 评论0 收藏0
8道经典JavaScript面试题解析，你真的掌握JavaScript了吗？

摘要：浏览器的主要组成包括有调用堆栈，事件循环，任务队列和。好了，现在有了前面这些知识，我们可以看一下这道题的讲解过程实现步骤调用会将函数放入调用堆栈。由于调用堆栈是空的，事件循环将选择回调并将其推入调用堆栈进行处理。进程再次重复，堆栈不会溢出。 JavaScript是前端开发中非常重要的一门语言，浏览器是他主要运行的地方。JavaScript是一个非常有意思的语言，但是他有很多一些概念，大...

taowen 2019-08-26 10:41 评论0 收藏0
用一道大厂面试题带你搞懂事件循环机制

本文涵盖面试题的引入对事件循环面试题执行顺序的一些疑问通过面试题对微任务、事件循环、定时器等对深入理解结论总结面试题面试题如下，大家可以先试着写一下输出结果，然后再看我下面的详细讲解，看看会不会有什么出入，如果把整个顺序弄清楚 Node.js 的执行顺序应该就没问题了。 async function async1(){ console.log(async1 start) ...

ShowerSun 2019-08-26 10:57 评论0 收藏0