zoukankan      html  css  js  c++  java
  • JS的同步与异步

      我们都知道JS的代码是同步执行的,也就是按照我们所书写的顺序一一执行,但是有3个特殊,他们属于异步执行:计时器(setInterval,setTimeout),事件(onclick,onkeydown等),ajax;接下来我们分析比较一下同步执行的代码和异步执行的代码之间的一些执行逻辑;

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>Document</title>
     8 </head>
     9 <body>
    10     
    11 </body>
    12 </html>
    13 <script>
    14 //同步执行我们就拿console.log("我是同步执行");举例,异步执行我们拿延时定时器举例:
    15     setTimeout(function(){
    16         console.log("我是异步执行1");
    17     },2000);
    18     setTimeout(function(){
    19         console.log("我是异步执行2");
    20     },1000);           //经过1秒(1000ms)以后,"我是异步执行2"被同时打印出来;
    21                         //再经过1秒,"我是异步执行2"被打印出来。
    22 //多个异步执行代码执行的时候,谁快先执行谁;接下来看看他们是否互相影响:
    23     setTimeout(function(){
    24             console.log("不定义变量a即将报错" + a);
    25         },1000);
    26     setTimeout(function(){
    27         console.log("我是异步执行2");
    28     },1000);   
    29     console.log("我是同步执行")        //先打印"我是同步执行";经过1秒(1000ms)以后,先打印报错(a is not defined);然后"我是异步执行2"被同时打印出来;这个先后顺序是由延时定时器的时间决定的,但是我们可以发现即便之前的异步代码有报错,并不影响之后代码的执行;
    30 //我们接下来测试同步执行代码报错对后面的影响:
    31     console.log("不定义变量a即将报错" + a);
    32     setTimeout(function(){
    33         console.log("我是异步执行1")  
    34         },1000);
    35     setTimeout(function(){
    36         console.log("我是异步执行2");
    37     },1000);   
    38     console.log("我是同步执行")      //此段代码只会报错(a is not defined);说明同步执行代码一旦报错,后续代码将不再执行;这也是同步代码和异步代码很大的区别;
    39 //注:若console.log(a);var a = 10;此时会打印"undefined";并不是报错,需另当别论;这里涉及到变量提升,详情可见另一篇文章说明;
    40          
    41 </script>
    既然有异步代码,我们也可以利用Promise方法让异步代码来同步执行,详见:https://www.cnblogs.com/XieYFwin/p/10850037.html
  • 相关阅读:
    编程之美---求数组中最长递增子序列
    编程之美----子数组的最大乘积
    编程之美----寻找数组中的最大值和最小值
    编程之美---找符合条件的整数
    编程之美----最大公约数问题
    编程之美----1的数目
    编程之美----寻找发帖“水王”
    C语言 |= &= 位运算
    整型数类型定义
    extern使用方法总结!(转)
  • 原文地址:https://www.cnblogs.com/XieYFwin/p/10852569.html
Copyright © 2011-2022 走看看