promise与回调的异步编程比较（小demo）

最新推荐文章于 2024-05-26 09:45:58 发布

lijixuanA

最新推荐文章于 2024-05-26 09:45:58 发布

阅读量1.8k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lijixuanA/article/details/78654595

版权

前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

首先我们要做三个小球的运动，第一个动后第二个动之后第三个动
我们先写出三个小球球

    <style>
    .ball{
        width:40px;
        height:40px;
        border-radius: 20px;
    }
    .ball1{
        background:red;
    }
    .ball2{
        background:yellow;
    }
    .ball3{
        background:blue;
    }

    </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>

之后就是三个小球的运动

//获取三个小球
    var ball1 = document.querySelector('.ball1')
    var ball2 = document.querySelector('.ball2')
    var ball3 = document.querySelector('.ball3')

运动函数
 function animate (ball, distance, cb) {
     //设置一个定时器，每13毫秒移动一像素（13毫秒是浏览器最好的兼容效果）
     setTimeout(function() {
         //获取到小球的目前位置
         var 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() {

                     })
                 })
             })
         })
     })
 } )

这种写法就是我们正常使用回调函数进行异步的操作

结下来使用promise进行一样的操作，看看区别
首先也是写出三个小球，与上面一样，然后我们引入一个promise库，里面有定义好的promise对象

<script src='./node_modules/bluebird/js/browser/bluebird.js'></script>

进入目标文件夹下，使用npm install bulebird下载

    //获取到promise对象，就是bulebird暴漏出来的接口
    var Promise = window.Promise
    //运动函数
    function promiseAnimate(ball, distance) {
        //返回一个promise对象
        return new Promise(function(resolve, reject) {

            function _animate () {
                setTimeout(function() {
                    var 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 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)
        })

两种写法是一样的效果

promise最大的特点就是：回调函数可以写成规范的链式调用写法，程序流程可以很清楚，接口可以实现强大功能。

lijixuanA

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
promise与回调的异步编程比较（小demo）

首先我们要做三个小球的运动，第一个动后第二个动之后第三个动我们先写出三个小球球 <style> .ball{ width:40px; height:40px; border-radius: 20px; } .ball1{ background:red; } .ball2{
复制链接

扫一扫

专栏目录