<!Doctype>
<html>
<head>
<title>Promise animation</title>
<style>
.ball {
width: 40px;
height: 40px;
border-radius: 20px
}
.ball1 {
background: red
}
.ball2 {
background: yellow
}
.ball3 {
background: green
}
</style>
<script src='./node_modules/bluebird/js/browser/bluebird.js'></script>
</head>
<body>
<div class='ball ball1' style='margin-left: 0'></div>
<div class='ball ball2' style='margin-left: 0'></div>
<div class='ball ball3' style='margin-left: 0'></div>
</body>
<script>
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
animate(ball, distance, cb)
}
}, 13)
}
//回调函数的方式有些不够直观，异步的话这里采用promise
/*animate(ball1, 100, function() {
animate(ball2, 200, function() {
animate(ball3, 300, function() {
animate(ball3, 150, function() {
animate(ball2, 150, function() {
animate(ball1, 150, function() {
})
})
})
})
})
})*/
var Promise = window.Promise
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
_animate()
}
}, 13)
}
_animate()
})
}
promiseAnimate(ball1, 100)
.then(function() {
return promiseAnimate(ball2, 200)
})
.then(function() {
return promiseAnimate(ball3, 300)
})
.then(function() {
return promiseAnimate(ball3, 150)
})
.then(function() {
return promiseAnimate(ball2, 150)
})
.then(function() {
return promiseAnimate(ball1, 150)
})
</script>
</html>
node.js promise 入门小实例
最新推荐文章于 2024-04-09 18:47:28 发布
698
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
