ES6---非同步

weixin_34377065發表於2018-04-11
非同步

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函式來獲取結果

相關文章