初次接触Promise异步编程

最新推荐文章于 2025-10-18 15:49:34 发布

原创最新推荐文章于 2025-10-18 15:49:34 发布 · 773 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#异步 #javascript

javascript 专栏收录该内容

37 篇文章

订阅专栏

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

首先看下面这段动画的原始的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)
     })