异步题

前端经常遇到的异步

图片加载需要时间

document.getElementsByTagName('img')[0].width // 宽度为 0
console.log('done')

document.getElementsByTagName('img')[0].onload = function(){
    console.log(this.width) // 宽度不为 0
    console.log('real done')
}
console.log('done')

面试题中的异步

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

上面用 var 代码的时序图，理解异步

把 var i 改成 let 就可以破解

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

AJAX 中的异步

同步的：

let request = $.ajax({
  url: '.',
  async: false
})
console.log(request.responseText)

异步的：

$.ajax({
    url: '/',
    async: true,
    success: function(responseText){
        console.log(responseText)
    }
})

异步的形式

一般有两种方式拿到异步结果

• 傻逼方法：轮询
• 正规方法：回调

回调的形式

Node.js 的 error-first 形式
 fs.readFile('./1.txt', (error, content)=>{
     if(error){
         // 失败
     }else{
         // 成功
     }
 })

jQuery 的 success / error 形式
 $.ajax({
     url:'/xxx',
     success:()=>{},
     error: ()=>{}
 })

jQuery 的 done / fail / always 形式
 $.ajax({
     url:'/xxx',
 }).done( ()=>{} ).fail( ()=>{} ).always( ()=> {})

Prosmise 的 then 形式
 $.ajax({
     url:'/xxx',
 }).then( ()=>{}, ()=>{} ).then( ()=>{})