js执行顺序+同步异步

Posted 2023-03-29

参考技术A 按照js同步执行的顺序，函数调用会首先执行for循环，循环5次开启了5个延迟器，延时器内部的回调函数将会异步执行，会在延时1s后进入消息队列等待执行。循环了5次，所以此时i的值为5，然后同步执行console.log打印5，第一次同步执行结束，然后开始执行消息队列的异步任务，打印5个5，中间的undefined是函数调用无返回值返回的。

执行顺序和第一题相同，不同的是延时器被包裹在了一个立即执行函数内容，并把每一次循环的i作为参数传入，此时循环内部的函数形成了一个私有作用域，每一次的i变量被独立保存了起来，因此每一次循环的i的值都会被打印出来。

延时器内部回调函数是异步函数，将在延时结束后，进入消息队列等待执行，因此同步的console.log("CCCC")最优先执行，然后延时0ms的延时器的回调先进入消息队列，1000ms后第一个延时器的回调再进入消息队列等待执行，因此先执行0ms的回调打印DDDD，再执行1000ms的回调打印BBBB。

这里与上一题不同的是中间多了一个执行3s的同步while循环，因此执行顺序是这样的：
第一个延时器延时1s后内部异步回调函数进入消息队列等待执行，
等待while循环3s后打印"CCCC"，
循环结束后第一个延时器内部的回调已经进入消息队列第一个执行位置等待执行。
第二个延时器延时0s后内部异步回调函数进入消息队列等待执行，延时结束后排到第一个延时器的回调函数后面，
因此异步队里内部先打印"BBBB"，再打印"DDDD"

js同步异步执行顺序setTimeOut面试题分析

    <script>
    for(var i=0;i<2;i++){
      setTimeout(function(){
              console.log(i);
        },0);
    }
    </script>
　　//  结果：2,2

打印两个2而不是0,1，跟js执行顺序有关系。

所有的任务分为两种，一种是同步任务，一种是异步任务。同步任务是指在主线程上排队的任务。异步任务是指不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。

（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。

（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

详情看阮一峰JavaScript运行机制。链接：http://www.ruanyifeng.com/blog/2014/10/event-loop.html

setTimeOut函数为异步任务，for循环为同步任务，setTimeOut里的函数为回调函数。执行顺序为：同步优先，异步靠边，回调垫底。所以即使setTimeOut的时间参数是0依然会放到任务队列里，而不是主线程。主线程执行完for循环以后才执行异步任务setTimeOut。另外setTimeout()只是将事件插入了"任务队列"，必须等到当前代码（执行栈）执行完，主线程才会去执行它指定的回调函数。要是当前代码耗时很长，有可能要等很久，所以并没有办法保证，回调函数一定会在setTimeout()指定的时间执行。

<script>
    for(var i=0;i<2;i++){
      (function(){
          console.log(i);
      }(i))
    }
</script>
// 结果：0,1

里边换成立即执行函数，则会打印0,1.