JAVAscript是单线程,语句按照出现的顺序执行的。
验证:
业务代码实是这样的:
执行结果:
纳尼?这与“语句按照出现的顺序执行的”违背咯.......
这就是本文需要解释的原因了:
①JavaScript是单线程,很长时间内应该也不会改变;
②JavaScript存在事件循环机制。
JavaScript执行分为 同步任务和异步任务。同步任务马上执行,异步任务等待执行。就像小车排队过收费站,带有钱车主先通过,没钱交保护费的把车挪到一边等着。
上图 call stack 就是收费窗口,过一辆车卡住一辆,箭头2 绿色框那群车主等候交保护费。已经借到钱的车主,去蓝色区域继续等待,等 call stack 没有车了,收费员会叫蓝色区域 车主去交费。以后都是这样操作,没有人逃得了!
专业图解:
同步就是有过路费,直接交费走人;
异步:Event Table就是借到钱了,Event Queue就是等待当收费窗口没其他车主了,过去交费。
我们来分析一段较复杂的代码,看看你是否真的掌握了js的执行机制:
console.log('1'); setTimeout(function() { console.log('2'); process.nextTick(function() { console.log('3'); }) new Promise(function(resolve) { console.log('4'); resolve(); }).then(function() { console.log('5') }) }) process.nextTick(function() { console.log('6'); }) new Promise(function(resolve) { console.log('7'); resolve(); }).then(function() { console.log('8') }) setTimeout(function() { console.log('9'); process.nextTick(function() { console.log('10'); }) new Promise(function(resolve) { console.log('11'); resolve(); }).then(function() { console.log('12') }) })
首次执行的时候,①和②是同步任务,2和5是异步宏任务,3和4中then是异步微任务,所以首轮打印‘1’,‘7’字符串;
第二轮,先打印微任务,所以打印‘6’,‘8’字符串;
第三轮,执行宏任务,绿框2在前面,那就先执行2里面的操作:
异步里面当然可以有自己的同步和异步,所以打印‘2’,‘4’,接着‘3’,‘5’;
第四轮,执行宏任务,绿框5,
跟第三轮一模一样,所以打印‘9’,‘11’,然后‘10’,‘12’。
就这样执行完了,最终结果:1,7,6,8,2,4,3,5,9,11,10,12。
总结思想:大任务划分为小任务,比如刚开始分为 5 大绿框。判断每个绿框执行顺序后,进入单个绿框中,再继续划分,依然是 同步 ,异步宏,异步微 判断;完成了单个绿框后,继续其他单个绿框。