动画就是异步的逻辑,比如一小男孩走路为主线,在走到不同的路段就会有不同的操作,走路是通过css3的transition与animation的结合完成的,所以针对这类异步的处理采用jquery的Deferred封装起来。
下面直接贴代码:
// 小孩走路 //
var boy = BoyWalk();
// 开始
$("button:first").click(function() {
// 开始第一次走路
boy.walkTo(2000, 0.2)
.then(function() {
//第一次走路完成
boy.setColoer('red')
}).then(function() {
//第二次走
return boy.walkTo(2000, 0.4)
}).then(function() {
//第二次走路完成
boy.setColoer('yellow')
}).then(function() {
//第三次走路
return boy.walkTo(2000, 0.6)
}).then(function() {
//第三次走路完成
boy.setColoer('blue')
});
});
这里要了解三个步骤:
var dtd = $.Deferred(); //创建
dtd.resolve(); //成功
dtd.then() //执行回调
=====以上代码中then()是通过dtd来执行的,同理
boy.walkTo(2000, 0.2).then(function() {
// 第一次走路完成
boy.setColoer('red');
})
要在boy.walkTo()后面紧跟.then(),则boy.walkTo()必须返回$.Deferred()对应的变量