js中同步和异步编程 _js

这是一篇给前端小白看的文章，大神请绕道～～～不送～～
我们先来看一到一道面试题，一共5行代码，问输出结果是什么。
for(var i=0; i<5; i++){setTimeout(function(){console.log(i);},1000);}这道题的正确率仅有50%，对于前端初学者更是难上加难，不能理解。

先说同步执行，就是规定代码必须自上而下执行。等上一行代码执行完，才能执行下一行的代码。
好比我们闯关游戏，甭管这关有多难，你都得通关后才能开启下一关。像这段代码，

文章插图
js的同步执行
中间的for循环，要循环两万次，那也等它循环结束后再执行下面的代码。
这就是同步执行，在js语言中，大部分都是同步执行的。

再来说异步，js中少有的异步，一定要记牢。
1.定时器 setTimeout setinterval
2.ajax的异步请求
3.es6中的promise
看这段代码，

文章插图
ajax的异步编程
先执行第二行的变量声明，然后执行ajax的异步请求，这时，如果是同步，就会等请求结束后，才会执行下面的代码。而异步的好处就是，不用等待请求是否结束，仍然可以执行下面的代码，向控制台打印变量。一般请求时间是不固定的，异步的话，就能大大节省打开页面的时间。
再看这段代码，

文章插图
定时器也是异步编程
第三行设置了一个定时器，定时器也是异步的，无论何种定时器，函数里面的内容都不会在这里执行。
都要等到浏览器打开时才会依照时间顺序执行。所以对于异步，可以理解为不会阻塞下面代码执行。
最后，我们再看一下片头的这道面试题。
for(var i=0; i<5; i++){setTimeout(function(){console.log(i);},1000);}我们知道，for循环是同步执行的，循环了5次，分别设置了5个定时器，
这5个定时器，等浏览器打开时，会依次执行函数里的内容，console.log(i);
i是全局变量，此时已随着for循环从0递增成了5 。所以最后的结果是，5个5 。

【js中同步和异步编程】