JS的同步与异步

最新推荐文章于 2020-12-03 07:24:26 发布

weixin_34088598

最新推荐文章于 2020-12-03 07:24:26 发布

阅读量50

点赞数

原文链接：http://www.cnblogs.com/XieYFwin/p/10852569.html

版权

　　我们都知道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