Javascript同步与异步

Javascript同步与异步

JS是单线程

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是∶如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

console.log(1);

setTimeout(function() {
    console.log(3);
}, 1000);

console.log(2);

如上面那段代码所示,如果按照单线程来说,运行这段代码,会先输出1然后等待一秒以后在输出3，最后输出2，这样的话就很浪费时间，也就是我们所说的堵塞,我们必须要等上面的代码全部运行完成，才能执行下面的代码

同步和异步

为了解决这个问题，利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程。于是JS中出现了同步和异步。

• 同步

  前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法︰我们要烧水煮饭，等水开了(10分钟之后），再去切菜，炒菜。

• 异步

  你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

console.log(1);

setTimeout(function() {
    console.log(3);
}, 1000);

console.log(2);
//结果是：1，2，3

因为出现了异步的概念,所以当输出1的时候,因为3的输出需要耗费时间,所以2会直接输出,3最后输出

那么下面这段代码的结果又是什么呢？

console.log(1);

setTimeout(function() {

    console.log(3);

}, 0);

console.log(2);
//结果是：1，2，3，

为什么会这样呢？

JS把所有的任务分成了两大类分别是同步任务和异步任务

同步任务都在主线程上执行，形成了一个执行栈

JS中异步任务是通过回调函数实现的

一般而言，异步任务有以下三种类型：

1、普通事件，如click、resize等

2、资源加载，如load、error等

3、定时器，包括setInterval、setTimeout等

异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）

执行机制

1.先执行执行栈中的同步任务。

⒉异步任务（回调函数)放入任务队列中,先不执行。

3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

如下图所示：

当我们遇到多个异步任务的时候,他是怎么执行的呢？

console.log(1);
document.onclick = function() {
    console.log('click');
}
console.log(2);
setTimeout(function() {
    console.log(3)
}, 3000)

当我们遇到多个异步任务的时候,会出现一个异步进程处理机制来处理。

首先,先执行同步任务,打印1，当执行到第一个回调函数的时候,会将其提交到异步进程处理机制来处理,当鼠标点击的时候才会将回调函数加入任务队列,如果不点击则不会加入,就会直接略过，继续执行下面的代码，打印2，当我们执行到第二个回调函数的时候,会将其提交到异步进程处理机制来处理,只有三秒的时间到了才会将其加入任务队列，当时间到了以后,将console.log(3)加入任务队列,这时候,主线程执行栈中已经没有代码了，意味着同步任务已经全部执行完毕,再次回到任务队列中查看有没有异步任务,发现有console.log(3),就立刻执行,打印出3,前提是我们没有点击鼠标,当console.log(3)执行完毕时,任务队列已经空了,所以结果就是1,2,3,如果我们在三秒之后点击了鼠标,

那么fn将会被加入任务队列中,虽然我们的同步任务已经结束了,但是因为有事件循环机制的存在,它会一直循环检查任务队列的情况,那么fn就会被执行,那么每当我们点击一次鼠标,就会往任务队列中添加一个异步任务,就会执行一次,如果我们是在三秒之内点击的鼠标,那么会先执行fn异步任务,在输出3.

当我们点击一次鼠标,就会往任务队列中添加一个异步任务,就会执行一次,如果我们是在三秒之内点击的鼠标,那么会先执行fn异步任务,在输出3.

推荐视频讲解：https://www.bilibili.com/video/BV1Sy4y1C7ha?p=278