cpu内存已被榨干
有人和我一样 在第三个球去往300px的路上卡的走不动的吗 递归加回调 直接把内存和cpu榨干了
3 回答
同样的逻辑 但是这段代码流畅运行
var ball1 = document.querySelector('.ball1');
var ball2 = document.querySelector('.ball2');
var ball3 = document.querySelector('.ball3');
var Promise = window.Promise; //Bug window 写成了Window
function promiseAnimate(ball,distance){
return new Promise(function(resolve,reject){
function _animate(){ //此处在函数前加上_是私有函数书写规范
var marginLeft = parseInt(ball.style.marginLeft,10);
setTimeout(function(){
if ( marginLeft == distance) {
resolve();
} else {
if (marginLeft < distance) {
marginLeft++;
}else {
marginLeft--;
}
}
ball.style.marginLeft = marginLeft+'px'; //Bug此处需要加px
_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)
})
这是第一段榨干内存的代码
var ball1 = document.querySelector('.ball1');
var ball2 = document.querySelector('.ball2');
var ball3 = document.querySelector('.ball3');
// function animate(ball,distance,callback){
// var marginLeft = parseInt(ball.style.marginLeft,10);
// setTimeout(function(){
// if ( marginLeft == distance) {
// callback && callback();
// } else {
// if (marginLeft < distance) {
// marginLeft++;
// }else {
// marginLeft--;
// }
// }
// ball.style.marginLeft = marginLeft+'px'; //Bug此处需要加px
// animate(ball,distance,callback);
// },13);
// }
// animate(ball1,100,function(){
// animate(ball2,200,function(){
// animate(ball3,300,function(){
// animate(ball3,150,function(){
// animate(ball2,150,function(){
// animate(ball1,150,function(){
// //回调结束
// })
// })
// })
// })
// })
// })
举报
0/150
提交
取消
