JS深入理解（二）之异步

同步的sleep函数

function sleep(seconds){
    var start = new Date()
    while(new Date() - start < seconds * 1000){

    }
    return
}

经常遇到的异步问题

document.getElementsByTagNames('img')[0].width // 宽度为 0
解决：onload

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

回调形式

1. Node.js 的 error-first 形式

    fs.readFile('./1.txt', (error, content)=>{
        if(error){
            // 失败
        }else{
            // 成功
        }
    })
   

2. jQuery 的 success / error 形式

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

3. jQuery 的 done / fail / always 形式

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

4. Prosmise 的 then 形式

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

Promise

出现错误就会抛给下个责任人的error

自己返回 Promise

// 自己写一个promise
function ajax(){
    return new Promise((resolve, reject)=>{
        做事
        如果成功就调用 resolve
        如果失败就调用 reject
    })
}

var promise = ajax()
promise.then(successFn, errorFn)

function Promise(fn){
    var status = 'pending'
    function successNotify(){
        status = 'resolved'
        toDoThen.apply(undefined, arguments)
    }
    function failNotify(){
        status = 'rejected'
        toDoThen.apply(undefined, arguments)
    }
    function toDoThen(){
        setTimeout(()=>{ // 保证回调是异步执行的
            if(status === 'resolved'){
                for(let i =0; i< successArray.length;i ++)    {
                    successArray[i].apply(undefined, arguments)
                }
            }else if(status === 'rejected'){
                for(let i =0; i< failArray.length;i ++)    {
                    failArray[i].apply(undefined, arguments)
                }
            }
        })

    }
    var successArray = []
    var failArray = []
    fn.call(undefined, successNotify, failNotify)
    return {
        then: function(successFn, failFn){
            successArray.push(successFn)
            failArray.push(failFn)
            return undefined // 简化
        }
    }
}

关键字async / await

await 等待异步结果再执行语句。
async 告诉浏览器后面的操作是异步
= 是同

async functon fn(){
    var result = await buyFruit() //buyFruit()是异步的
    return result
}

var r = await fn()
console.log(r)