初次接触Promise异步编程

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值