Kolektador
Kolektador

Reputation: 3

self invoking function loop vs. for loop performance and render blocking question

I am animating an element and when it reaches the bounds of the container it will stop. I am wondering if a self invoking function loop is better in performance or a for loop is better? Are they both render blocking or not? I am intending to use requestAnimationFrame in whichever I end up using, I just want to hear other's input on which is better. Thanks.

Example of self invoking function loop:

var container = document.getElementById('container').getBoundingClientRect();
var move_me = document.getElementById('move_me').getBoundingClientRect();
var move_distance = 50;
(function loop_me(){
    move_distance += move_distance;
    if(move_me.right >= container.right){
        return null;
    }
    move_me.style.transform = 'translate3d('+move_distance+'px,0,0)';
    move_me.style.transition = '120ms linear';
    loop_me();
})();

vs.

var container = document.getElementById('container').getBoundingClientRect();
var move_me = document.getElementById('move_me').getBoundingClientRect();
var move_distance = 50;
for(i < elem.right; i < container.right; i++){
    move_distance += move_distance;
    if(move_me.right >= container.right){
       break;
    }
    move_me.style.transform = 'translate3d('+move_distance+'px,0,0)';
    move_me.style.transition = '120ms linear';
}

Upvotes: 0

Views: 45

Answers (0)

Related Questions