js运行机制——单线程、任务队列以及事件循环（event loop）

1、面试案例

for(var i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    });
}
console.log(abc);

// ********打印结果******
abc
5
5
5
5
5

2、相关知识点

-- 单线程：js特点，同一个时间只能做一件事

-- 任务队列：前一个任务结束，才会执行后一个任务

• 任务分为：同步任务、异步任务
  同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务
  异步任务：不进入主线程、而进入"任务队列"

-- 事件循环：主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。

3、案例分析

for(var i = 0; i < 5; i++) { // 同步任务  先执行
    setTimeout(function () { //异步任务  后执行
        console.log(i);
    });
}
console.log(abc); //同步任务  先执行

// ********打印结果******
abc // 先执行
5  // 在所有同步代码执行完毕之后，for循环里的i值已变成了5
5
5
5
5

4、for循环解决办法

-- 块作用域 let

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

-- 自执行函数（利用闭包原理）

for(var i = 0; i < 5; i++) {
    (function(i) {  // 存储每次循环的i值
        setTimeout(function () {
            console.log(i);
        });
    })(i)
}