Reputation: 3
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