首页 > 关于requestAnimationFrame和setTimeout的使用

关于requestAnimationFrame和setTimeout的使用

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

【热门文章】
【热门文章】