HTML5 - requestAnimationFrame Call Stack
Fiddle exploring how many times you can consecutively call requestAnimationFrame.
HTML
<div class="col-lg-12">
<div class="page-header">
<h3 id="navbar">Limit of requestAnimationFrame(...)</h3>
</div>
<div class="bs-component enter-stage-south">
<div id="fiddleHook"></div>
</div>
</div>
CSS
.enter-stage-south {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slide-up;
-webkit-animation-name: slide-up;
}
@-moz-keyframes slide-up {
from {
margin-top: 100%;
}
to {
margin-top: 0%;
}
}
@-webkit-keyframes slide-up {
from {
margin-top: 100%;
}
to {
margin-top: 0%;
}
}
JavaScript
(function (app, $, undefined) {
"use strict";
app.i = app.i || '';
app.print = function (c) {
var span = document.createElement("span");
span.class = "text-danger";
$(span).text(c + " ");
$("#fiddleHook").append(span);
};
app.run = function () {
app.print(app.i);
app.i++;
window.requestAnimationFrame(app.run());
};
$(document).ready(function () {
window.requestAnimationFrame(app.run());
});
})(window.app = window.app || {}, jQuery);