初次接触Promise异步编程_raku promise-优快云博客

本文链接：https://blog.youkuaiyun.com/github_38861674/article/details/77367210

本文通过一个具体的动画实例展示了如何将传统的基于回调函数的异步代码重构为使用Promise的方式，以此来简化代码并避免回调地狱的问题。具体包括安装bluebird库，并逐步将动画的callback写法转换为Promise链式调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先看下面这段动画的原始的callback写法：

var ball1 = document.querySelector('.ball1');
    var ball2 = document.querySelector('.ball2');
    var ball3 = document.querySelector('.ball3');
    function animate(ball, distance, callback){
        setTimeout(function(){
           var marginLeft = parseInt(ball.style.marginLeft, 10)
           if (marginLeft === distance) {
              callback && callback()
           }
           else {
             if (marginLeft < distance) {
                marginLeft = marginLeft + 2
             } else {
                marginLeft --
             }
             ball.style.marginLeft = marginLeft + 'px'
             animate(ball, distance, callback) 
           }

        }, 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(){
                     //结束
                   })
                })
              })
            })
        })
    })

改为promise写法为：

首先要按装bluebird依赖 npm install bluebird

var ball1 = document.querySelector('.ball1');
    var ball2 = document.querySelector('.ball2');
    var ball3 = document.querySelector('.ball3');
var Promise = window.Promise
    function promiseAnimate(ball, distance){
      return new Promise(function(resolve, reject){
           function _animate(){
             setTimeout(function(){
             var marginLeft = parseInt(ball.style.marginLeft, 10)
             if (marginLeft === distance) {
                resolve && resolve ()
             }
             else {
               if (marginLeft < distance) {
                marginLeft = marginLeft + 3
               } else {
                marginLeft --
               }
               ball.style.marginLeft = marginLeft + 'px'
               _animate() 
             }
         }, 13)
       }
       _animate()
      })
    }
    promiseAnimate(ball1, 100)
     .then(function(){
      return promiseAnimate(ball2, 200)
     })
     .then(function(){
      return promiseAnimate(ball3, 300)
     })
    .then(function(){
      return promiseAnimate(ball3, 150)
     })
     .then(function(){
      return promiseAnimate(ball2, 150)
     })
     .then(function(){
      return promiseAnimate(ball1, 150)
     })