理解JS异步和单线程

Posted 2020-10-17

什么是异步？

JS的执行环境是单线程，一定时间内只能执行一项任务，不能执行多项任务，为了要执行的代码，就有一个javascript任务队列。基于这一概念，JS执行任务时分为两种模式：同步和异步。

“同步模式”是指后一个任务必须等待前一个任务完成后再执行，前一个任务加载时会阻塞后面程序的进行；“异步模式”不一定按顺序执行任务，所以不会阻塞程序的运行。

//同步模式
console.log (100);
alert (200);
console.log (300);
//打印结果：100，200,（等待alert框点击确定后）300

//异步模式
console.log (100);
setTimeout (function () {
    console.log (200);
},1000);
console.log (300);
//打印结果：100，300，（隔一秒后）200

执行过程：先执行console.log(100)；再执行setTimeout，由于它是是异步函数，所以该函数被暂存起来放一边，不立即执行；再执行console.log(300)；确定程序都执行完毕后，队列处于空闲状态，查看暂存的setTimeout，如果无需等待时间，则直接执行函数，如果有，则等待一定时间后执行函数。

（如果同时存在多个等待时间不同setTimeout，先执行等待时间短的）

前端使用异步的场景

何时需要异步？可能发生等待的情况下，需要继续执行代码的时候。比如说等待过程中不能像上面例子中alert一样阻塞程序的运行。所以，需要等待的情况下都需要异步。

1、定时任务：setTimeOut，setInterval。例子如上；

2、网络请求：ajax请求，动态<img>加载；

//ajax请求示例
console.log ("start");
$.get ("./data.json",function (data) {
    console.log ("data");
});
console.log ("end");
//打印结果：start，end，（请求到json数据之后）data

//img加载示例
console.log ("start");
var img = document.createElement ("img");
img.onload = function () {
    console.log ("onload");
}
img.src = "/xx.jpg";
console.log ("end");
//打印结果：start，end，（img图片加载完成后）onload

3、事件绑定（点击多次执行多次）

//事件绑定示例
console.log ("start");
document.getElementById ("btn").addEventListener (‘click‘,function () {
    console.log ("clicked");
})
console.log ("end");
//打印结果：start，end，（完成click点击事件之后）clicked