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。