setInterval vs reqAnimFrame

by Arshad Muhammed

HTML

<div id="left" class="main m1"></div>
<div id="right" class="main m2"></div>

CSS

body{
	  width: 100%;
    height: 100%;
	}
  #test {
	  width: 10px;
	  height: 10px;
	  background: orange;
	  float: left;
	}
	
	.main {
	  height: 600px;
	  width: 45%;
	  float: left;
	}
	
	.m1 {
	  border: 2px solid red;
	}
	
	.m2 {
	  border: 2px solid blue;
	  margin-left: 2%;
	}

JavaScript

var left = $('#left');
var right = $('#right');


function repeatOften() {
  left.append('<div id="test"></div>');
  requestAnimationFrame(repeatOften);
}

requestAnimationFrame(repeatOften);

setInterval(function() {

  right.append('<div id="test"></div>');

}, 1000 / 60);