js异步之间执行的顺序

今天同事问了一个问题,怎么让ajax中的回调(保持异步)先执行,再让普通的function执行。。。

整了个解决办法:

如下:

<!DOCTYPE html>
<html>
<head>
    <title>lhy1</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
      debugger;
    (function(){
    // 建个ajax
    $.ajax({
        type:'POST',
        contentType:"application/json",
        url:"https://api.douban.com/v2/movie/top250?start=0&count=10",
        success: (result) => {
            console.log(result);
            console.log("RRRRRRRRRRRRRRRRRRRrr")
        },
        error: (err) => {
            console.log(err)
        }

    })
})();
setTimeout(() => {console.log("HHHHHH")},1)
    
</script>
</body>
</html>

 

将同步代码放入setTimeout中,变成异步,则和ajax中的回调同为异步,则按照异步的方式来排列执行顺序。

由此引入异步之间的执行顺序问题!

首先常见的异步一般有:ajax可以异步也可同步、回调、setTimeout系列、事件绑定。  而es6中的新增的promise、async/await。

按照js的执行顺序,先执行同步,再执行异步。那么上面这些异步的执行之内该如何执行呢?

首先了解一下宏任务和微任务。

在js执行机制中,除了同步任务和异步任务,还有宏任务和微任务。

  • 宏任务:整体代码script、setTimeout、setInterval。
  • 微任务:Promise、Promise.nextTick、回调

在js执行的时候,会先执行同步,异步被放入异步队列中,而不同的异步任务会被放入不同的异步队列中。

每次js执行,先从整体scripts也就是一个宏任务进入,执行完里面所有的微任务以后(也就是同步任务被执行完),再去异步的任务队列中,找到下一个宏任务,执行里面的所有微任务,如果没有宏任务了,则执行任务队列中的所有微任务。

所以异步的执行顺序是按照谁是宏任务,谁是微任务来执行的。

则定时器是异步中的老大,先执行。而IIFE是老大中的老大,更先执行,因为它设计的原理是要隔离作用域,不需要等待任何异步即可执行。

 

哈哈

 

posted @ 2019-08-30 22:34  大野酱  阅读(1042)  评论(0编辑  收藏  举报