js中同步与异步的理解

Posted 2020-10-14

前言

在说js中同步与异步前，我们先了解一下js底层执行知识，首先js是单线程语言，即同一时间只能执行一条任务，执行完一条任务后再执行下一条任务。

正文

首先我们来看一个例子：

• (function(){
• console.log(111111);
• window.setTimeout(function(){console.log(22222222);},0);
• window.setTimeout(function(){console.log(33333333);},0);
• window.setTimeout(function(){console.log(44444444);},0);
• window.setTimeout(function(){console.log(55555555);},0);
• console.log(666666666);
• })();
• 结果：111111
• 666666666
• 22222222
• 33333333
• 44444444
• 55555555

 

可见，虽然我们将定时器的回调函数执行延迟执行时间设为0，但是执行结果的顺序依然不是我们想要的，为什么呢？火狐浏览器API文档中是这样说的“虽然setTimeout延迟时间设置为0，但是其中的回调函数依然会被放到队列中，等待下一个机会执行，当前代码(即不需要放入队列中的程序)必须在队列代码之前执行”，其实这就是异步执行了。

其中说的队列是js中的一种机制，队列中放置的就是setTimeout中的回调函数，类似这些回调函数依次放入队列，队列中的程序会等到主线程上的程序执行完毕后再执行。

总结：js中所有程序的执行分为两类，第一类：同步任务，另一类是异步任务。同步任务就是主线程上排队执行的任务，只有一个任务执行完成后在执行下一个任务，异步任务既是上面说到的移入到队列中的任务，它不进入主线程，而进入“队列任务”，队列中的任务必须等到主线程中的任务执行完成后才会执行，“队列任务”会通知主线程，请求执行任务，该任务才会进入主线程中执行

具体来说，异步运行机制如下：

(1)所有同步任务都放到主线程中执行，形成一个执行栈。

(2)主线程之外还有一个“任务队列”，只要异步任务有了运行结果之后，就会在“任务队列”中放置一个事件。

(3)一旦“执行栈”中的所有同步任务执行完毕后，系统就会读取“任务列表”，看看里面有哪些事件，那些对应的异步任务就会结束等待状态，进入执行栈，开始执行。

主线程不断的重复步骤3