JS中的同步异步

目录

1. 在JS中，什么是同步异步？

2. JS中常见的异步代码

1. 在JS中，什么是同步异步？

通俗解释一下，同步与异步：

异步：不等待结果就执行接下来的代码，一句话：不等结果！
同步：等待异步代码执行完毕后才执行接下来的代码，一句话：等结果！
先来看一段同步代码

console.log(1)
sleep(3)  // 这里让控制台睡3s
console.log(2)  // 这里的2会在3s后被打印出来

同步会等待sleep(3)执行完毕后才执行后面的代码
再来看一段异步代码

console.log(1)
setTimeOut(function(){console.log('3秒结束')},3000)
console.log(2)  // 不等定时器，直接打印2
// 3s结束后才打印'3秒结束'

但是为啥JS是单线程的，却能实现异步代码呢？

其实上面的异步代码，在定setTimeOut闹钟时，JS引擎是委托了浏览器来监听这3s的等待，所以JS引擎的进程就空闲了，console.log(2)就能立刻执行。

而JS引擎在执行同步代码时，进程会一直堵塞，无法执行后面的代码。

2. JS中常见的同步异步代码

（1）获取图片宽度为0

var img = document.getElementsByClassName('img')[0].width  // width为0
// 图片加载的时候，可能尚未加载完就已经执行了JS代码

解决办法

img.onload = function(){
  // 在这里面获取宽度
}

（2）for循环点击li打印索引

let liList = document.getElementsByTagName('li')  // 假设有5个li元素
for(let i = 0; i < liList.length; i ++){
  liList[i].onclick = function(){
    console.log(i)  // 期望打印出0,1,2,3,4。实际打印出来5个5
  }
}

for循环中，每次循环都给li绑定一个点击事件，console.log(i)中的i是同一个i，在for循环结束时，i === 5，同时绑定了如下点击事件

liList[0].onclick=function(){console.log(i)}
liList[1].onclick=function(){console.log(i)}
liList[2].onclick=function(){console.log(i)}
liList[3].onclick=function(){console.log(i)}
liList[4].onclick=function(){console.log(i)}  // 注意打印的都是i，不是对应的0,1,2,3,4！
// 然鹅当用户点击li的时候，for循环已经执行完了，i已经变成5了

解决方法

1. for循环中用 let 代替 i ，使每次迭代的 i 都不一样
2. 用立即执行函数

let liList = document.getElementsByTagName('li')  // 假设有5个li元素
for(let i = 0; i < liList.length; i ++){
  !function(i){
    // 由于函数立即执行，会传进来对应的i
    liList[i].onclick = function(){
      console.log(i)  // 期望打印出0,1,2,3,4。实际打印出来5个5
    }
  }(i)
}

（3）AJAX
应该没人会发同步ajax吧......，万一请求不成功，JS引擎的进程就会一直被堵塞。
（4）Promise中 .then 的回调
为什么说Promise中 .then 的回调函数是异步的？来看一段代码：

promise.then(function(){ 
  if (flag) { 
    foo(); 
  } else { 
     setTimeout(function(){ 
        foo(); 
     }) 
  } 
});
bar();

我们来看下 bar 和 foo 的执行顺序
如果 then 回调是同步的：

flag 为真时，foo 先执行，然后执行bar。（bar会等上面promise代码的执行结果，执行完了才走到bar）
flag为假时，bar先执行，foo后执行。（bar会等上面promise代码的执行结果，但是执行到setTimeOut时，由于setTimeOut是异步的，所以bar就不等了，所以先执行bar）

如果 then 回调是异步的：

很明显，在promise发送请求时，bar 就已经请求了，代码执行顺序必定是先 bar 后 foo。

Promise为了保证代码的执行顺序永远保持一致，所以 then 回调采用了异步