Promise初体验

来源：互联网发布：淘宝小蜜是小二吗编辑：程序博客网时间：2024/06/06 16:28

想通过回调函数做一个动画效果：三个小球依次运动，第一个小球运动到指定位置后回调第二个小球运动，依次类推，效果如图所示：

到第三个小球到达指定位置再回调，让第二个小球往回移动，直到最后一个小球回到原位：

具体实现过程使用了简单的定时器，代码如下：

var ball1 = document.querySelector('.ball1');var ball2 = document.querySelector('.ball2');var ball3 = document.querySelector('.ball3');  function animate(ball, distance, cb) {    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, 100, function() {        animate(ball3, 100, function() {            animate(ball3, 0, function() {                animate(ball2, 0, function() {                    animate(ball1, 0, function() {                        alert(666)                    })                })            })        })    })})

看着这阶梯一般的回调函数，强迫症患者可能会很爽，但如果有成百上千的回调函数，这将会是一场灾难；

现在我们用promise重新写一下上面的函数。

首先安装bluebird，防止浏览器不兼容promise。

promise暴露在全局，可以直接var Promise = window.Promise;

重写promiseAnimate函数：

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()                        }                        else {                             if (marginLeft < distance) {                                marginLeft ++;                            }                            else {                                marginLeft --;                            }                             ball.style.marginLeft = marginLeft + 'px';                            _animate();                        }                    },13)                }                _animate();            })        }

使用promise的then方法回调：

promiseAnimate(ball1, 100)            .then(function() {                return promiseAnimate(ball2, 100)            })            .then(function() {                return promiseAnimate(ball3, 100)            })            .then(function() {                return promiseAnimate(ball3, 0)            })            .then(function() {                return promiseAnimate(ball2, 0)            })            .then(function() {                return promiseAnimate(ball1, 0)            })

使用then后，我们可以链式的回调，一目了然，简洁清晰！

当然promise还有很多特性，今天只是初步尝试一下~

1 0