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

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

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

        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还有很多特性,今天只是初步尝试一下~

Promise初体验的更多相关文章

  1. promise初体验,小白也能看懂

    promise出现的目的一为处理JavaScript里的异步,再就是避免回调地狱. promise有三种状态:pending/reslove/reject . pending就是未决,resolve可 ...

  2. Vue-cli的打包初体验

    前言:我司是一个教育公司,最近要做一个入学诊断的项目,领导让我开始搭建一套基于vue的H5的开发环境.在网上搜集很多的适配方案,最终还是选定flexible方案.选择它的原因很简单: 它的github ...

  3. .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验

    不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...

  4. Xamarin+Prism开发详解四:简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验

    Mac OS 虚拟机安装方法 最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...

  5. Spring之初体验

                                     Spring之初体验 Spring是一个轻量级的Java Web开发框架,以IoC(Inverse of Control 控制反转)和 ...

  6. Xamarin.iOS开发初体验

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAA+CAIAAAA5/WfHAAAJrklEQVR4nO2c/VdTRxrH+wfdU84pW0

  7. 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...

  8. 【Knockout.js 学习体验之旅】(1)ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  9. 在同一个硬盘上安装多个 Linux 发行版及 Fedora 21 、Fedora 22 初体验

    在同一个硬盘上安装多个 Linux 发行版 以前对多个 Linux 发行版的折腾主要是在虚拟机上完成.我的桌面电脑性能比较强大,玩玩虚拟机没啥问题,但是笔记本电脑就不行了.要在我的笔记本电脑上折腾多个 ...

随机推荐

  1. 快速构建Windows 8风格应用33-构建锁屏提醒

    原文:快速构建Windows 8风格应用33-构建锁屏提醒 引言 Windows Phone(8&7.5)和Windows 8引入了锁屏概念,其实做过Windows Phone 7.5应用开发 ...

  2. leetcode第19题--Remove Nth Node From End of List

    Problem: Given a linked list, remove the nth node from the end of list and return its head. For exam ...

  3. 安装Windows2008操作系统 - 初学者系列 - 学习者系列文章

    Windows2008这款服务器操作系统不知道有多少服务器在使用,毕竟前面有经典的2003系统,后续有2012操作系统.具体就不讨论这些了.下面就对Windows2008服务器操作系统的安装进行介绍. ...

  4. CQRS架构如何实现高性能

    CQRS架构如何实现高性能 CQRS架构简介 前不久,看到博客园一位园友写了一篇文章,其中的观点是,要想高性能,需要尽量:避开网络开销(IO),避开海量数据,避开资源争夺.对于这3点,我觉得很有道理. ...

  5. hdu 2795 段树--点更新

    http://acm.hdu.edu.cn/showproblem.php?pid=2795 在第一和第三多学校都出现线段树,我在比赛中并没有这样做.,热身下,然后31号之前把那两道多校的线段树都搞了 ...

  6. sql内置函数pivot强大的行转列功能

    原文:sql内置函数pivot强大的行转列功能 语法: PIVOT用于将列值旋转为列名(即行转列),在SQL Server 2000可以用聚合函数配合CASE语句实现 PIVOT的一般语法是:PIVO ...

  7. Strategic Game HDU

    Strategic Game                                                         Time Limit: 20000/10000 MS (J ...

  8. WebService和AngularJS实现模糊过滤查询

    WebService和AngularJS实现模糊过滤查询   [概要] 网上看到一个不错的帖子,用WebService获取json,然后在前端使用AngularJs进行过滤搜索,看完文章后,按自己的想 ...

  9. Oracle组函数、多表查询、集合运算、数据库对象(序列、视图、约束、索引、同义词)等

    count组函数:(过滤掉空的字段) select count(address),count(*) from b_user max() avg() min(),sum() select sum(age ...

  10. MacVim小试

    Mac OS X使用之——新年第一天弘法寺许愿,MacVim小试 分类: Vi/Vim Mac OS X2013-01-01 22:08 3371人阅读 评论(0) 收藏 举报   目录(?)[+] ...