var start = document.getElementById('start')
var elem = document.getElementById('test');
var elem2 = document.getElementById('test2');
start.onclick = function(){
moveElem(elem, 'left', 300);
moveElem2(elem2, 'left', 300);
};
function moveElem(obj, attr, target){
var current, speed = 0;
current = parseInt(getStyle(obj, attr));
speed = (target - current) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(current >= target){
return;
}else{
obj.style[attr] = current + speed + 'px';
requestAnimationFrame(function(){
moveElem(obj, attr, target);
});
}
}
function moveElem2(obj, attr, target){
var current, speed = 0;
current = parseInt(getStyle(obj, attr));
speed = (target - current) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(current >= target){
return;
}else{
obj.style[attr] = current + speed + 'px';
setTimeout(function(){
moveElem2(obj, attr, target);
}, 1000 / 60);
}
}
这两个性能真的差很远吗?我怎么感觉不出来呢?怎么查看他们的性能?还有我这样使用requestAnimationFrame有问题嘛?我的意思是直接return