for循环中后输出的i报错的原因

需求如下，在for循环内部，使用setTimeout函数，2秒后输出i,然后在最后打印i的值
代码如下

        for (var i = 0; i < 5; i++) {
            setTimeout(function () {
                console.log(i);
            }, 2000);
        }
        console.log("我在最后面" + i);

然而并不是想象中的结果
控制台输出如下：

可以看到，先执行了最后一行代码，然后才执行函数内部代码，这和函数由上到下依次执行矛盾了吗？
在后面的查阅之后，以及相关视频，才明白其中的原因。

回调函数https://www.jianshu.com/p/40e459cfdc6f

回调函数：一个函数被作为参数传递给另一个函数（在这里我们把另一
个函数叫做“otherFunction”），回调函数在otherFunction中被调用。
需要注意的很重要的一点是回调函数并不会马上被执行。它会在包含它的
函数内的某个特定时间点被“回调”（就像它的名字一样）

setTime内部的function便是回调函数，还有点击事件等。当代码执行到setTimeout内部的function时，并不会立即执行，而是将其放到消息队列里面，等到主线程的任务执行完毕，才会将消息队列中需要执行的代码放到主线程中继续执行。
因此，主线程中的执行代码依次执行

1. i=0,将log(i)放到消息队列当中
2. 重复到循环结束
3. 此时i=5;
   执行主线程中的log(“我在最后面”+i);输出5
   然后将消息队列中的代码放到主线程执行，log(i),这个i是全局变量，而此时i=5,所以输出5，其余的同样。

因此关键就在于不能让消息队列中的变量去访问全局变量i,而是要去访问他们每一次对应的i,那么就需要一个局部变量来接收i的值

代码如下：

        for (var i = 0; i < 5; i++) {
            function doit(x) {
                setTimeout(function () {
                    console.log(x);
                }, 2000);
            };
            doit(i);
        }
        console.log("我在最后面" + i); 

控制台打印如下：

或者使用立即执行函数，传递参数

        for (var i = 0; i < 5; i++) {
            (function (x) {
                setTimeout(function () {
                    console.log(x);
                }, 2000);
            })(i);
        }
        console.log("我在最后面" + i);

这样更加简洁