初次接触Promise异步编程

最新推荐文章于 2022-09-06 13:34:22 发布

景洪在编程

最新推荐文章于 2022-09-06 13:34:22 发布

阅读量764

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签：异步 javascript

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

javascript 专栏收录该内容

37 篇文章

订阅专栏

本文通过一个具体的动画实例展示了如何将传统的基于回调函数的异步代码重构为使用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)
     })