callback Promise async await 异步回调案例

时间 2019-11-17

标签 callback promise async await 异步案例栏目 Java 繁體版

原文原文链接

前端开发中会遇到不少异步回到，和相互依赖关系的状况，下面咱们就经过一个简单案例总体的了解一下，经常使用的异步回调的用法和优点

1.案例很简单，页面上有三个小球

2.当页面加载后，第一个小球会向左滚动，当第一个小球到达500px的位置，第二个小球开始运动，当第二个小球到达300px的位置时，第三个小球开始运动，也一样向左滚动100px，当第三个小球到达位置时，浏览器弹出‘ok’

html+css 简单的样式和结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            position: absolute;
        }
        #box div{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            
        }
        #box :nth-child(1){
            top: 0;
        }
        #box :nth-child(2){
            top: 120px;
        }
        #box :nth-child(3){
            top: 240px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

callback 方法

callback 写发就出现了你们常见的回调地狱(倒金字塔)结构的代码

<script>
let box = document.getElementById('box');
let balls = box.querySelectorAll('div');

    function run(ele,speed,callback){
        let pos = 0;
        let timer = setInterval(()=>{
            pos+=2;
            if(pos>=speed){
               clearInterval(timer);
                callback();
            }else{
                ele.style.left = pos +'px';
            }

        },10)
    }


    run(balls[0],500,function(){
        run(balls[1],300,function(){
            run(balls[2],100,function(){
                alert('ok')
            })
        })
    })
</script>

Pormise 方法

经过使用Promise的then方法，一样达到了效果，而且解决了，回到地狱问题；

<script>
let box = document.getElementById('box')
let balls = box.querySelectorAll('div')

    function run(ele,speed){

        return new Promise((resolve,reject)=>{
            let pos = 0;
            let timer = setInterval(()=>{
                pos+=2;
                if(pos>=speed){
                    clearInterval(timer);
                    resolve();
                }else{
                    ele.style.left = pos +'px';
                }

            },10)
        })

    }


    run(balls[0],500).then(data=>{
        return run(balls[1],300);
    }).then(data=>{
        return run(balls[2],100);
    }).then(data=>{
        alert('ok');
    })
</script>

async await 方法

<script>
let box = document.getElementById('box')
let balls = box.querySelectorAll('div')

    function run(ele,speed){

        return new Promise((resolve,reject)=>{
            let pos = 0;
            let timer = setInterval(()=>{
                pos+=2;
                if(pos>=speed){
                    clearInterval(timer);
                    resolve();
                }else{
                    ele.style.left = pos +'px';
                }

            },10)
        })

    }

    async function m(){
        await run(balls[0], 500);
        await run(balls[1], 300);
        await run(balls[2], 100);
    }

    m().then(data=>{
        alert('ok')
    })

</script>

callback Promise async await 异步回调 案例

前端开发中会遇到不少异步回到，和相互依赖关系的状况，下面咱们就经过一个简单案例总体的了解一下，经常使用的异步回调的用法和优点

1.案例很简单，页面上有三个小球

2.当页面加载后，第一个小球会向左滚动，当第一个小球到达500px的位置，第二个小球开始运动，当第二个小球到达300px的位置时，第三个小球开始运动，也一样向左滚动100px，当第三个小球到达位置时，浏览器弹出‘ok’

callback 方法

Pormise 方法

async await 方法

callback Promise async await 异步回调案例