ES6---异步

1. 同步与异步

同步：等待结果

异步：不等待结果 setTimeOut也属于异步

2. 遇到的关于异步的问题

• 获取图片宽度

var imgName = document.getElementByTagName('img')[0];
var imgWidth = imgName.width;//0
为什么是0 呢？
因为需要等图片加载完才可以获取到它的宽度，所以正确的应该是：
var imgName = document.getElementByTagName('img')[0];
img.onload = function() {
    var imgWidth = imgName.width;//0
    console.log(imgWidth)
}
以上代码验证之前记得禁用缓存，不然通过缓存的话 也是可以获取到宽度的

• 面试时可能被问到的异步问题（看下面的例子）

html

 <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

js

let liList = document.querySelectorAll('li')
for(var i= 0; i<liList.length; i++){
    liList[i].onclick = function(){
        console.log(i)
    }
}

此时点击每个 li 发现打印出来的都是 6，为什么呢？

因为此时的i会进行变量提升，上面代码等价于
let liList = document.querySelectorAll('li')；
var i；
for(i= 0; i<liList.length; i++){
    liList[i].onclick = function(){
        console.log(i)
    }
}
每次循环之后，i都会被+1，最终i= 6；
等到用户在点击的时候，就会发现打印出来的都是6了。

那怎么解决这个问题呢？

很简单，只要把var变成let 就好了
let liList = document.querySelectorAll('li')；
for(let i= 0; i<liList.length; i++){
    liList[i].onclick = function(){
        console.log(i)
    }
}
这个时候打印出来的就是0,1，2，3，4，5
因为let不会变量提升，let声明的变量仅在块级作用域内有效

更多let知识

• AJAX中的异步

  AJAX请求有同步和异步，异步请求成功之后可以调取success函数来获取结果