Promise初体验
想通过回调函数做一个动画效果:三个小球依次运动,第一个小球运动到指定位置后回调第二个小球运动,依次类推,效果如图所示:
到第三个小球到达指定位置再回调,让第二个小球往回移动,直到最后一个小球回到原位:
具体实现过程使用了简单的定时器,代码如下:
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初体验的更多相关文章
- promise初体验,小白也能看懂
promise出现的目的一为处理JavaScript里的异步,再就是避免回调地狱. promise有三种状态:pending/reslove/reject . pending就是未决,resolve可 ...
- Vue-cli的打包初体验
前言:我司是一个教育公司,最近要做一个入学诊断的项目,领导让我开始搭建一套基于vue的H5的开发环境.在网上搜集很多的适配方案,最终还是选定flexible方案.选择它的原因很简单: 它的github ...
- .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验
不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...
- Xamarin+Prism开发详解四:简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验
Mac OS 虚拟机安装方法 最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...
- Spring之初体验
Spring之初体验 Spring是一个轻量级的Java Web开发框架,以IoC(Inverse of Control 控制反转)和 ...
- Xamarin.iOS开发初体验
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAA+CAIAAAA5/WfHAAAJrklEQVR4nO2c/VdTRxrH+wfdU84pW0
- 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...
- 【Knockout.js 学习体验之旅】(1)ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
- 在同一个硬盘上安装多个 Linux 发行版及 Fedora 21 、Fedora 22 初体验
在同一个硬盘上安装多个 Linux 发行版 以前对多个 Linux 发行版的折腾主要是在虚拟机上完成.我的桌面电脑性能比较强大,玩玩虚拟机没啥问题,但是笔记本电脑就不行了.要在我的笔记本电脑上折腾多个 ...
随机推荐
- 快速构建Windows 8风格应用33-构建锁屏提醒
原文:快速构建Windows 8风格应用33-构建锁屏提醒 引言 Windows Phone(8&7.5)和Windows 8引入了锁屏概念,其实做过Windows Phone 7.5应用开发 ...
- 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 ...
- 安装Windows2008操作系统 - 初学者系列 - 学习者系列文章
Windows2008这款服务器操作系统不知道有多少服务器在使用,毕竟前面有经典的2003系统,后续有2012操作系统.具体就不讨论这些了.下面就对Windows2008服务器操作系统的安装进行介绍. ...
- CQRS架构如何实现高性能
CQRS架构如何实现高性能 CQRS架构简介 前不久,看到博客园一位园友写了一篇文章,其中的观点是,要想高性能,需要尽量:避开网络开销(IO),避开海量数据,避开资源争夺.对于这3点,我觉得很有道理. ...
- hdu 2795 段树--点更新
http://acm.hdu.edu.cn/showproblem.php?pid=2795 在第一和第三多学校都出现线段树,我在比赛中并没有这样做.,热身下,然后31号之前把那两道多校的线段树都搞了 ...
- sql内置函数pivot强大的行转列功能
原文:sql内置函数pivot强大的行转列功能 语法: PIVOT用于将列值旋转为列名(即行转列),在SQL Server 2000可以用聚合函数配合CASE语句实现 PIVOT的一般语法是:PIVO ...
- Strategic Game HDU
Strategic Game Time Limit: 20000/10000 MS (J ...
- WebService和AngularJS实现模糊过滤查询
WebService和AngularJS实现模糊过滤查询 [概要] 网上看到一个不错的帖子,用WebService获取json,然后在前端使用AngularJs进行过滤搜索,看完文章后,按自己的想 ...
- Oracle组函数、多表查询、集合运算、数据库对象(序列、视图、约束、索引、同义词)等
count组函数:(过滤掉空的字段) select count(address),count(*) from b_user max() avg() min(),sum() select sum(age ...
- MacVim小试
Mac OS X使用之——新年第一天弘法寺许愿,MacVim小试 分类: Vi/Vim Mac OS X2013-01-01 22:08 3371人阅读 评论(0) 收藏 举报 目录(?)[+] ...