promise使用实例

//这是旧版回调写法
// function moveTo(el,x,y,cb){
//     el.style.transform = `translate(${x}px,${y}px)`
//     setTimeout(function(){
//         cb && cb()
//     },1000)
// }

// let el = document.querySelector('div')

// document.querySelector('button').addEventListener('click',(e) =>{
//     moveTo(el,100,100,function(){
//         console.log('1')
//     })
// })

//promise
function moveTo(el,x,y){
    return new Promise((resolve, reject) => {
    el.style.transform = `translate(${x}px,${y}px)`
    setTimeout(function(){
        resolve()
    },1000)
    }) 
}
    let el = document.querySelector('div')

    // document.querySelector('button').addEventListener('click',(e) =>{
    //     moveTo(el,100,100).then(function(){
    //         return moveTo(el,200,200).then(function(){
    //             return moveTo(el,300,300)
    //         })           
    //     })
    // })
    document.querySelector('button').addEventListener('click',(e) =>{
        moveTo(el,100,100).then(function(){
            moveTo(el,200,200).then(function(){
                moveTo(el,300,300).then(function(){
                    moveTo(el,0,0)
                })
            })           
        })
    })

在回调函数中先return一个promise，下面的then指的就是reslove(),then要和promise配合