promise应用一

淡淡的烟草味﹌ 2022-05-27 12:59 200阅读 0赞

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="../node_modules/bluebird/js/browser/bluebird.js"></script>
        <style> .ball { width: 40px; height: 40px; border-radius: 50%; } .ball1 { background: red; } .ball2 { background: yellow; } .ball3 { background: green; } </style>
    </head>
    <body>
    <div class="ball ball1" style="margin-left: 0;"></div>
    <div class="ball ball2" style="margin-left: 0;"></div>
    <div class="ball ball3" style="margin-left: 0;"></div>
    <script> let ball1 = document.querySelector('.ball1'); let ball2 = document.querySelector('.ball2'); let ball3 = document.querySelector('.ball3'); //方式一 // function animate(ball , distance ,cb) { // setTimeout(function () { // let marginLeft = parseInt(ball.style.marginLeft,10); // if(marginLeft === distance){ // cb && cb() // }else { // if(marginLeft < distance){ // marginLeft++; // }else{ // marginLeft--; // } // ball.style.marginLeft = marginLeft+'px'; // animate(ball,distance,cb) // } // },13) // } // animate(ball1,100,function () { // animate(ball2,200,function () { // animate(ball3,300,function () { // animate(ball3,150,function () { // animate(ball2,150,function () { // animate(ball1,150,function () { // }) // }) // }) // }) // }) // }) //方式二 //npm install bluebird let Promise = window.Promise; function promiseAnimate(ball,distance) { return new Promise(function (resolve,reject) { function _animate() { setTimeout(function () { let marginLeft = parseInt(ball.style.marginLeft,10); if(marginLeft === distance){ resolve() }else { if(marginLeft < distance){ marginLeft++; }else{ marginLeft--; } ball.style.marginLeft = marginLeft+'px'; _animate() } },13) } _animate() }) } promiseAnimate(ball1,100) .then(function () { return new promiseAnimate(ball2,200) }) .then(function () { return new promiseAnimate(ball3,300) }) .then(function () { return new promiseAnimate(ball3,150) }) .then(function () { return new promiseAnimate(ball3,150) }) .then(function () { return new promiseAnimate(ball2,150) }) .then(function () { return new promiseAnimate(ball1,150) }) </script>
    </body>
    </html>