JSFiddle - React, Tailwind, and code Playground
JavaScript
// This makes sure that there is a method to request a callback to update the graphics for next frame
requestAnimationFrame =
window.requestAnimationFrame || // According to the standard
window.mozRequestAnimationFrame || // For mozilla
window.webkitRequestAnimationFrame || // For webkit
window.msRequestAnimationFrame || // For ie
function (f) { window.setTimeout(function () { f(Date.now()); }, 1000/60); }; // If everthing else fails
var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;//for cancellation
// some code here
var progress = 0
function doSomething(){
if (progress != 100){
// do some thing here
var myAnimation = requestAnimationFrame(doSomething)
}else{
// dont use clearInterval(interval) instead when you know that animation is completed,use cancelAnimationFrame().
window.cancelAnimationFrame(myAnimation);
}
}