js中的同步和异步的区别和理解

js中的同步和异步的区别和理解

前端面试中很容易问到的问题就是同步和异步的，其实很多人潜意识是知道怎么用，也大概明白一些，但是就是不知道该怎么表达，怎么去描述这个问题。我们可以按这个思路来回答—why-what-how
why(为什么)：js是单线程的，只能处理完一件事再做另外一件事，但是设想如果前面一件事花费的时间特别长，我们就只能一直等着他，就会阻塞下面的进程，这样程序运行时间增长，就会降低用户体验。（这里可能有人会想到，如果js是多线程的，不就解决这个问题了，但是其实这是由他的主要功能决定的，他的功能是与用户互动，以及操作DOM，如果在同一个时间，一个进程创建了这个节点，另一个删除了这个节点，那就很尴尬了）
what（同步和异步是什么）：
同步：按照一定的顺序去执行，执行完一个才能执行下一个
异步：执行顺序是不确定的，由触发条件决定，什么时间执行也是不确定的，即使是定时器（下面做解释），异步处理可以同时执行多个。

下面看一个小小的异步的案例

<script>
        setTimeout(function() {
            console.log(1)
        })
        console.log(2);
    </script>
    2 1

上面得执行结果是先打印2，然后再打印1，（下面解释）
如果想知道里面的原理，我们可以从js的执行机制入手：
首先了解两个概念，同步任务和异步任务：
同步任务：只有前一个任务执行完成后，才可执行下一个任务，在主线程中
异步任务：这个队列的所有任务都是不进入主线程执行，进入任务队列，被浏览提供的线程执行，当执行完毕后就会产生一个回调函数，并且通知主线程，在主线程执行完当前所执行的任务后，就会调取最早通知自己的回调函数，使其进入主线程中执行，比如ajax请求，再主线程中呈现的就是请求结果~

js的执行机制
1、先判断是js代码是同步的还是异步的，同步的就是同步任务，直接进入主线程处理，异步的就进入任务列表
2、当任务列表内的异步处理达到了触发条件时候（点击事件被点击时），就进入任务队列
3、当所有的主线程的任务执行完毕之后，才会将任务队列里面的任务（回调函数）添加到主线程。

这也就是为什么会先执行同步，再执行异步的原因，也就是先打印2，再打印1的原因
另外也是因为先执行同步，那么如果同步执行时间太长或者出错，死循环，就不会处理异步里面的回调函数了（上面两个问题的解释）

总结：js的异步处理是和浏览器一起作用的，js是单线程的，但是浏览器是多线程的。浏览器可以同时处理多个异步任务。但是这些异步任务中的回调函数还是在js的主线程中一个一个执行的。

以上均是我个人的理解，仅供参考。
以下是参考的一些博客，不是太理解的可以看看：
鱼活在水中的博客：https://blog.csdn.net/qq_39480597/article/details/79662913；
[阮一峰老师的博客]http://www.ruanyifeng.com/blog/2014/10/event-loop.html