js之中的异步

异步

1.知道哪部分代码是异步的;

2.必须要知道异步程序之中的数据或者赋值的变量在哪里可用;

js:单线程语言

  • 上面一行代码不执行结束,下面一行代码不会执行;

单线程
多线程

  • js中存在很大需要长时间等待才会执行的代码;

异步:在js中需要消耗大量时间等待某些程序执行的时候,会让正常程序继续执行.耗时较长的程序等会执行.耗时较长的程序我们把它称之为异步程序;

js设定的异步:

  1. 事件;
  2. 定时器;
  3. 所有的ajax请求
  4. promise

异步程序是等到所有同步程序执行结束才会去执行的代码;

  1. 事件有事件处理函数(回调函数)
  2. 定时器有回调函数
  3. ajax请求也有回调函数
  4. promise...

异步程序的第二个特征就是必须有个回调函数

  • 回调函数: 同步程序执行结束之后,回头调用的函数;

异步的执行顺序; Event Loop;

异步实战😗*

如果把script标签放在head中,即body之上,如果不使用异步程序的回调函数包裹,打印出来的lis.length为0,放在异步程序之中,则会放在所有代码之后执行,即可获得最终的lis.length!

<script>
        // 异步程序之中的代码,会在当前所有代码之后执行;
        // setTimeout(function(){
        //     // 放在了最上面;
        //     var lis = document.getElementsByTagName("li");
        //     console.log(lis.length);
        // },0)

        window.onload = function(){
            var lis = document.getElementsByTagName("li");
            console.log(lis.length);
        }
</script>
<body>
    <ul>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>
</body>

面试题中的异步

根据异步的原理,定时器里的回调函数在for循环结束之后调用,所以无论定时器的时间间隔是多少,最后打印的结果都是10;

for(var i = 0; i <= 10 ; i ++ ){
    setTimeout(function(){
        console.log(i);//10
    },0)
}
posted @ 2020-03-30 19:37  Joanna_9908  Views(126)  Comments(0Edit  收藏  举报