18-2、Promise解决回调地狱

<script>
    // 1.认识Promise
    // Promise是异步操作的一种解决方案
    // document.addEventListener('click', () => {
    //     console.log('这里是异步的');
    // })
    // console.log('这里是同步的');

    // 2.什么时候使用Promise
    // Promise 一般来解决层层嵌套的回调函数(回调地狱 callback hell)的问题


    // 3.使用Promise解决回调地狱
    // 运动
    const move = (el, { x = 0, y = 0 } = {}, end = () => { }) => {
        el.style.transform = `translate3d(${x}px,${y}px,0)`;

        el.addEventListener(
            'transitionend',
            () => {
                // console.log('end');
                end();
            },
            false
        );
    };
    const boxEl = document.getElementById('box');

    const movePromise = (el, point) => {
        return new Promise((resolve) => {
            move(el, point, () => {
                resolve();
            })
        })
    }

    document.addEventListener('click', () => {
        movePromise(boxEl, { x: 150 }).then(() => {
            return movePromise(boxEl, { x: 300, y: 350 })
        }).then(() => {
            return movePromise(boxEl, { x: 500 })
        }).then(() => {
            return movePromise(boxEl, { x: 0, y: 0 })
        })
    })

    // document.addEventListener('click', () => {
    //     move(boxEl, { x: 150 }, () => {
    //         move(boxEl, { x: 150, y: 150 }, () => {
    //             move(boxEl, { y: 150 }, () => {
    //                 move(boxEl, { x: 0, y: 0 })
    //             })
    //         })
    //     })
    // }, false)
</script>