我用Jquery的deferred對(duì)象為什么實(shí)現(xiàn)不了異步編程？
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>小球運(yùn)動(dòng)+遞歸函數(shù)</title>
<style type="text/css">
.ball{
width: 40px;
height: 40px;
border-radius: 50%;
margin-top: 10px;
}
#ball1{
? ? ?background: red;
}
#ball2{
? ? ?background: yellow;
}
#ball3{
? ? ?background: blue;
}
</style>
</head>
<body>
<div class="ball" id = "ball1" ?style="margin-left:10px"></div>
<div class="ball" id = "ball2" ?style="margin-left:10px"></div>
<div class="ball" id = "ball3" ?style="margin-left:10px"></div>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(element) {
return window.setTimeout(callback, 1000 / 60);
};
})();
? var ball1 =document.querySelector("#ball1");
? var ball2 =document.querySelector("#ball2");
? var ball3 =document.querySelector("#ball3");
?
function animate (ball,distance) {
? var dtd = $.Deferred();
?requestAnimFrame(function(){
var marginleft = parseInt(ball.style.marginLeft, 10);
if(marginleft === distance){
dtd.resolve();
}else if(marginleft < distance){
marginleft++; ?? ?
}else{
marginleft--;
}
ball.style.marginLeft = marginleft + 'px';
animate(ball,distance);
});
? ?return dtd;
}
? ? ? ?
? ? ? ?animate(ball1,100).then(function(){
? ? ? ? return animate(ball2,200);
? ? ? ?}).then(function(){
? ? ? ? return animate(ball3,300);
? ? ? ?}).then(function(){
? ? ? ? return animate(ball3,150);
? ? ? ?}).then(function(){
? ? ? ? return animate(ball2,150);
? ? ? ?}).then(function(){
? ? ? ? return animate(ball1,150);
? ? ? ?})
</script>
</body>
</html>
2018-04-10
后來自己搗弄出來了，下面是實(shí)現(xiàn)代碼：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>小球運(yùn)動(dòng)+clearInterval()</title>
<style type="text/css">
.ball{
width: 40px;
height: 40px;
border-radius: 50%;
margin-top: 10px;
}
#ball1{
? ? ?background: red;
}
#ball2{
? ? ?background: yellow;
}
#ball3{
? ? ?background: blue;
}
</style>
</head>
<body>
<div class="ball" id = "ball1" ?style="margin-left:10px"></div>
<div class="ball" id = "ball2" ?style="margin-left:10px"></div>
<div class="ball" id = "ball3" ?style="margin-left:10px"></div>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
? var ball1 =document.querySelector("#ball1");
? var ball2 =document.querySelector("#ball2");
? var ball3 =document.querySelector("#ball3");
?
function animate (ball,distance) {
?var timer = null;
?var dtd = $.Deferred();
?timer = setInterval(function(){
var marginleft = parseInt(ball.style.marginLeft, 10);
if(marginleft === distance){
clearInterval(timer);
dtd.resolve();
}else if(marginleft < distance){
marginleft++; ?? ?
}else{
marginleft--;
}
ball.style.marginLeft = marginleft + 'px';
},13);
? ?return dtd;
}
? ? ? ?animate(ball1,100).then(function(){
? ? ? ? return animate(ball2,200);
? ? ? ?}).then(function(){
? ? ? ? return animate(ball3,300);
? ? ? ?}).then(function(){
? ? ? ? return animate(ball3,150);
? ? ? ?}).then(function(){
? ? ? ? return animate(ball2,150);
? ? ? ?}).then(function(){
? ? ? ? return animate(ball1,150);
? ? ? ?})
</script>
</body>
</html>