每日挑战，从Javascript面试题目了解一些你可能忽略的概念 - Day20

tags: ItIron2021 Javascript

作者碎碎念

终於来到第20天了，回头看了一下...自己这系列文章缺点真是不少，要把活动中所讲的观念用简短的文字转述下来真的蛮有难度的，未来要写这样的文章前会再做更全面的规划，今年就请大家忍耐一下，感谢(●'◡'●)

前言

昨天我们拐了个小弯去玩了一个小主题，今天开始则是一系列的相关主题了，还请大家撑住，这是讲解应用问题前的最後一系列主题，也是我认为极端重要且难度相对高的部分，若有任何不清楚的地方都欢迎留言讨论罗!

本日题目与解释

请你解释JS中是如何处理同步、非同步情况的?

是的，这一系列的题目会围绕着非同步的主题前进，若你觉得你对这方面还不够熟悉，我自己是蛮推荐好好看完这几天的文章的:D 我们来看一下要如何解这题目吧!

其实要回答这个题目，最直接的方法就是讲出关键字 Event Loop
点出面试官想听的主题後你再开始进一步的说明会是我个人比较推荐的方式。

我们都知道Javascript是一个单执行绪(single-thread)的语言，也就是一次他只能处理一件事情，理论上你必须等前面的事情完成後才可以继续往下处理，举个简单的例子

console.log(1)
console.log(2)
console.log(3)

// 毫不让人意外的输出结果
1
2
3

但很多时候我们需要等API回传结果才能做某一部份的操作，这时候就会出一点问题了，我们用setTimeout来模拟一下需要等待的回应

console.log(1)
setTimeout(()=> console.log(2), 1000) 
console.log(3)

// 输出结果就会变为
1
3
---- 一秒过後 ----
2

上述这个看起来有点奇妙的结果就是Event Loop所造成的，毕竟实际上我们不可能等到api都回应之後才继续其他无关的程序玛的操作，打个实际的比方吧!

假设(或是不用假设)你今天是个肥宅，半夜时去买消夜只是基本，你打算买鸡排、饮料、卤味跟烧烤回去吃，你并不会先买完鸡排再去买饮料、再去买之後的每一个东西，你是先到每一家店去点餐，并在餐点做好之後再回去拿

程序码的执行也是这样的，当JS在主执行绪(main thread/stack)碰到非同步程序码的时候，就会先将它丢到一个叫做Web API的等待区块，让非同步程序玛在那边执行完後推到伫列(queue)去等待主执行绪中的程序玛都执行完毕後，再将伫列中排队的家伙一个个推回主执行绪并开始运作，如下图的概念。

这就是event loop最基本的说明了，这也就是为什麽刚刚的简易范例中会是先印出1、3，一秒後才看到2这个数字。我在系列的文章不断强调这系列并不会深入讲解每一个遇到的概念，毕竟这不是此系列的重点，但你可以透过我提供的关键字或资源去作进一步的讲解。event loop自然还有一些其他的细节，比方说一开始run time时还有一个分配heap memory的步骤等等，有兴趣的可以参考今天的推荐影片，js event loop我还没有看过讲得比他更好的!

本日核心观念与总结

核心观念

event loop

总结

• 了解Javascript中如何处理非同步程序码的运行并能举出基本例子

超级推荐的影片

What the heck is event loop

本文章同步发布於个人部落格，有兴趣的朋友也可以来逛逛~!