ES6异步方案之实战案例——移动小球

最新推荐文章于 2022-04-24 18:01:06 发布

Blockchain Explorer

最新推荐文章于 2022-04-24 18:01:06 发布

阅读量245

点赞数

分类专栏： JavaScript/ES6/NodeJS 文章标签： ES6异步实战

本文链接：https://blog.csdn.net/TDCQZD/article/details/82431128

版权

JavaScript/ES6/NodeJS 专栏收录该内容

79 篇文章 0 订阅

订阅专栏

一、回调地狱

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #wrap {
            width: 300px;
            height: 300px;
            border: 1px solid;
            /*居中*/
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        #wrap > div {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            position: absolute;
        }

        #wrap > .circle {
            margin-top: 100px;
            background: blue;
        }

        #wrap > .circle2 {
            margin-top: 150px;
            background: red;
        }

        #wrap > .circle3 {
            margin-top: 200px;
            background: greenyellow;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div class="circle"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
</div>
</body>
<script>
    window.onload = function () {

        var circle = document.querySelector(".circle")
        var circle2 = document.querySelector(".circle2")
        var circle3 = document.querySelector(".circle3")

        //小球移动方法
        function move(ball, dis, cb) {
            var timer = setInterval(function () {
                var startLeft = ball.offsetLeft;
                if (startLeft === dis) {
                    cb && cb();
                    clearInterval(timer);
                } else {
                    if (startLeft < dis) {
                        startLeft++;
                    } else if (startLeft > dis) {
                        startLeft--;
                    }
                    ball.style.left = startLeft + "px";
                }
            }, 10)
        }

        //回调地狱实现方式
        move(circle, 100, function () {
            move(circle2, 150, function () {
                move(circle3, 200, function () {
                    move(circle3, 150, function () {
                        move(circle2, 150, function () {
                            move(circle, 150, function () {

                            })
                        })
                    })
                })
            })
        })
    }
</script>

效果图：
这里写图片描述
二、Promise

<script>
    window.onload = function () {

        var circle = document.querySelector(".circle")
        var circle2 = document.querySelector(".circle2")
        var circle3 = document.querySelector(".circle3")

        //小球移动方法
        function move(ball, dis, cb) {
            var timer = setInterval(function () {
                var startLeft = ball.offsetLeft;
                if (startLeft === dis) {
                    cb && cb();
                    clearInterval(timer);
                } else {
                    if (startLeft < dis) {
                        startLeft++;
                    } else if (startLeft > dis) {
                        startLeft--;
                    }
                    ball.style.left = startLeft + "px";
                }
            }, 10)
        }

        //Promise实现方式
        var promise = new Promise(function (resolve, reject) {
            move(circle, 100, function () {
                resolve(circle2)
            })
        });
        promise
            .then(function (c) {
                return new Promise(function (resolve, reject) {
                    move(c, 150, function () {
                        resolve([circle3,200]);//数组传递多个数据
                    })
                })

            })
            .then(function ([c,d]) {
                return new Promise(function (resolve, reject) {
                    move(c, d, function () {
                        resolve({ c: circle3, d: 150 })//对象传递多个数据
                    })
                })
            })
            .then(function (obj) {
                return new Promise(function (resolve, reject) {
                    move(obj.c, obj.d, function () {
                        resolve()
                    })
                })
            })
            .then(()=>{
                return new Promise( (resolve, reject) => {
                    move(circle, 150, ()=> {
                        resolve();
                    })
                })
            });


    }
</script>

三、generator

<script>
    window.onload = function () {

        var circle = document.querySelector(".circle")
        var circle2 = document.querySelector(".circle2")
        var circle3 = document.querySelector(".circle3")

        //小球移动方法
        function move(ball, dis, cb) {
            var timer = setInterval(function () {
                var startLeft = ball.offsetLeft;
                if (startLeft === dis) {
                    cb && cb();
                    clearInterval(timer);
                } else {
                    if (startLeft < dis) {
                        startLeft++;
                    } else if (startLeft > dis) {
                        startLeft--;
                    }
                    ball.style.left = startLeft + "px";
                }
            }, 10)
        }

        //Generator实现方式
        var it =  asyncMove();
        it.next();
        function * asyncMove() {
          var yi =   yield move(circle,100, ()=>{
                it.next(circle2);
            });
            yield move(yi,150, ()=>{
                it.next();
            });
            yield move(circle3,200, ()=>{
                it.next();
            });
            yield move(circle3,150, ()=>{
                it.next();
            });
            yield move(circle,150, ()=>{
                it.next();
            });
        }
    }
</script>

四、async&await

<script>
    window.onload = function () {

        var circle = document.querySelector(".circle")
        var circle2 = document.querySelector(".circle2")
        var circle3 = document.querySelector(".circle3")

        //小球移动方法
        function move(ball, dis, cb) {
            var timer = setInterval(function () {
                var startLeft = ball.offsetLeft;
                if (startLeft === dis) {
                    cb && cb();
                    clearInterval(timer);
                } else {
                    if (startLeft < dis) {
                        startLeft++;
                    } else if (startLeft > dis) {
                        startLeft--;
                    }
                    ball.style.left = startLeft + "px";
                }
            }, 10)
        }

        //Async&await地狱实现方式
        asyncMove();
        async function  asyncMove() {
            await new Promise((resolve,reject)=>{
                move(circle,100,()=>{
                    resolve();
                })
            });
            await new Promise((resolve,reject)=>{
                move(circle2,150,()=>{
                    resolve();
                })
            });
            await new Promise((resolve,reject)=>{
                move(circle3,200,()=>{
                    resolve();
                })
            });
            await  new Promise((resolve,reject)=>{
                move(circle3,150,()=>{
                    resolve();
                })
            });
            await new Promise((resolve,reject)=>{
                move(circle,150,()=>{
                    resolve();
                })
            });
        }

    }
</script>