Promise实现小球的运动
Promise简要说明
Promise可以处理一些异步操作；如像setTimeout、ajax处理异步操作是一函数回调的方式;当然ajax在jQuery版本升级过程中，编写方式也有所变动.
Promise是抽象异步处理对象以及对其进行各种操作的组件.
Promise最初被提出是在 E语言中， 它是基于并列/并行处理设计的一种编程语言。
创建promise对象的流程如下所示。
new Promise(fn)返回一个promise对象在
fn中指定异步等处理处理结果正常的话，调用
resolve(处理结果值)处理结果错误的话，调用
reject(Error对象)
resolve("new Promise value......"); 会让这个promise对象立即进入确定（即resolved）状态，并将 "new Promise value......" 传递给后面then里所指定的 onFulfilled 函数
Promise.resolve(value); 的返回值也是一个promise对象，所以我们可以像下面那样接着对其返回值进行 .then 调用
Promise 实现小球的运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animate Ball</title>
<style type="text/css">
.ball {
width: 40px;
height: 40px;
border-radius: 20px;
margin-left: 0;
}
.ball1 {
background-color: yellow;
}
.ball2 {
background-color: red;
}
.ball3 {
background-color: blue;
}
</style>
</head>
<body>
<div class="ball ball1" style="margin-left:0px;"></div>
<div class="ball ball2" style="margin-left:0px;"></div>
<div class="ball ball3" style="margin-left:0px;"></div> <script type="text/javascript" src="./node_modules/bluebird/js/browser/bluebird.js"></script>
<script type="text/javascript" >
/*function animateBall(ball, distance, callback){
//setTimeout过渡效果
setTimeout(function(){
var marginLeft = parseInt(ball.style.marginLeft, 10);
console.log(marginLeft);
if(marginLeft==distance){
callback && callback();
}else{
if(marginLeft<distance){
marginLeft ++;
}
if(marginLeft>distance){
marginLeft--;
}
ball.style.marginLeft = marginLeft +'px';
//callback
animateBall(ball, distance, callback);
}
}, 13);
}
var ball1 = document.querySelector('.ball1');
var ball2 = document.querySelector('.ball2');
var ball3 = document.querySelector('.ball3');
animateBall(ball1, 150, function(){
animateBall(ball2, 250, function(){
animateBall(ball3, 350, function(){
animateBall(ball3, 200, function(){
animateBall(ball2, 100, function(){
animateBall(ball1, 50, function(){ })
})
})
})
})
})*/
var ball1 = document.querySelector('.ball1');
var ball2 = document.querySelector('.ball2');
var ball3 = document.querySelector('.ball3');
//promise
var Promise = window.Promise; //使用 promise 替代回调函数
function promiseAnimate(ball, distance){
return new Promise(function(resolve, reject) {
function _animate(){
//setTimeout过渡效果
setTimeout(function(){
var marginLeft = parseInt(ball.style.marginLeft, 10);
console.log(marginLeft);
if(marginLeft==distance){
//resolve函数：将Promise对象的状态从 “未完成”变为 “成功”（Pending ->Resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去
resolve(ball, distance);
}else{
if(marginLeft<distance){
marginLeft ++;
}
if(marginLeft>distance){
marginLeft--;
}
ball.style.marginLeft = marginLeft +'px';
//callback
_animate();
}
}, 13);
}
_animate();
});
}
promiseAnimate(ball1, 150)
.then(function(){
return promiseAnimate(ball2, 250);
}).then(function(){
return promiseAnimate(ball3, 300);
}).then(function(){
return promiseAnimate(ball3, 200);
}).then(function(){
return promiseAnimate(ball2, 100);
}).then(function(){
return promiseAnimate(ball1, 50);
})
</script>
</body>
</html>
总结 ： Promise链式的编写方式解决回调函数深度嵌套问题
效果演示如下
资料参考
http://liubin.org/promises-book/#how-to-write-promise
http://ejohn.org/blog/how-javascript-timers-work/
http://www.cnblogs.com/zichi/p/4604053.html
谷歌翻译api http://translate.hotcn.top/
Promise实现小球的运动的更多相关文章
- HTML5 Canvas彩色小球碰撞运动特效
脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效. 效果展示 http://hovertree.com/texiao/html5/39/ ...
- HDU 6373(斜面上小球弹跳 运动分解)
题意是给定两个点的位置,过原点引一条射线穿过第一个点,射线位置作为斜面位置,第二个点处令一小球自由落体,问小球能碰撞到斜面几次. 开始时想算出两次碰撞中小球沿斜面运动的距离,然后发现每一段距离会因为高 ...
- promise实例小球运动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- java 事件处理机制：按下上下左右键控制小球的运动
/** * 加深对事件处理机制的理解 * 通过上下左右键来控制一个小球的位置 */package com.test3;import java.awt.*;import javax.swing.*;im ...
- JavaScript实例：运动的小球
本篇博文通过制作一个小球运动动画的实例,来学习在HTML5的画布上实现动画制作的方法,同时理解面向对象程序设计的基本思想. 1．绘制小球 先在HTML页面中设置一个画布. <canvas id= ...
- Promise初体验
想通过回调函数做一个动画效果:三个小球依次运动,第一个小球运动到指定位置后回调第二个小球运动,依次类推,效果如图所示: 到第三个小球到达指定位置再回调,让第二个小球往回移动,直到最后一个小球回到原位: ...
- javascript运动系列第五篇——缓冲运动和弹性运动
× 目录 [1]缓冲运动 [2]弹性运动 [3]距离分析[4]步长分析[5]弹性过界[6]弹性菜单[7]弹性拖拽 前面的话 缓冲运动指的是减速运动,减速到0的时候,元素正好停在目标点.而弹性运动同样是 ...
- 基于canvas实现物理运动效果与动画效果(一)
一.为什么要写这篇文章 某年某月某时某种原因,我在慕课网上看到了一个大神实现了关于小球的抛物线运动的代码,心中很是欣喜,故而写这篇文章来向这位大神致敬,同时也为了弥补自己在运动效果和动画效果制作方面的 ...
- 第七讲：HTML5中的canvas两个小球全然弹性碰撞
<html> <head> <title>小球之间的碰撞(全然弹性碰撞)</title> <script src="../js/jsce ...
随机推荐
- 腾讯云数据库团队：MySQL语句复制（SBR）的缺陷列举
作者介绍: 赵伟 腾讯云TDSQL数据库开发者 MySQL (这里的MySQL是指广义的mysql,包括oracle,mysql,percona,mariadb等)的Statement Based R ...
- 中国版Office 365 应用程序注册
作者:陈希章 发表于 2017年3月23日 中国版Office 365是由世纪互联进行运营的一个云服务,单纯从技术角度来看的话,它基本保持了与国际版的同步.但是由于两个版本本质上是完全独立的,其中最关 ...
- vue路由
vue-router 现在的应用都流行SPA应用(single page application) 传统的项目大多使用多页面结构,需要切换内容的时候我们往往会进行单个html文件的跳转,这个时候受网络 ...
- MPSOC之3——centos环境配置及petalinux安装及使用
ubuntu虽然能正常安装,但是build时会出现闪退情况,闪退后一切归零,没啥错误提示,改用centos来安装petalinux. 0.环境 vmware pro 14,centos 7.3 pet ...
- 修改Intellij IDEA中工程对应的Java SDK、Scala SDK
如果编译Scala工程时,遇到如下异常: can't expand macros compiled by previous versions of Scala 很可能是工程的scala版本,和依赖的包 ...
- MySQL学习（一） 概述
MySQL是一个开源的数据库系统,近些年来使用率越来越高,目前属于Oracle公司所有,其拥有MySQL的商标,属于主流版本,由于其开源特性,出现了一些分支,常见的有MariaDB.Perco ...
- 37、mysql初识
之前我们写代码需要存取信息时用的是文件可是用文件存取数据非常局限,今天我们将走进一个新的世界mysql 一.数据库由来 之前所学,数据要永久保存,比如用户注册的用户信息,都是保存于文件中,而文件只能存 ...
- 当前时间、前n天、后n天、取前n条记录、从第n条开始取m条
当前时间:NOW() 前n天:DATE_SUB(NOW(),INTERVAL n DAY) 后n天:DATE_SUB(NOW(),INTERVAL -n DAY) 取前n条记录:SELECT * FR ...
- DataBase MongoDB高级知识-易扩展
MongoDB高级知识-易扩展 应用程序数据集的大小正在以不可思议的速度增长.随着可用宽带的增长和存储器价格的下跌,即使是一个小规模的应用程序,需要存储的数据也可能大的惊人,甚至超出了很多数据库的处理 ...
- Data Base mongodb driver2.5环境注意事项
mongodb driver2.5环境注意事项 一.问题: 如果使用vs2012开发就会报这个错误: 未能加载文件或程序集“System.Runtime.InteropServices.Runtime ...