js animation & requestAnimationFrame All In One

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

window.requestAnimationFrame(callback);


const callback = () => {
  window.requestAnimationFrame(callback);
}
// inint
callback();

https://caniuse.com/#feat=requestanimationframe

demo


// define array to store balls
let balls = [];

// define loop that keeps drawing the scene constantly
function loop() {
  ctx.fillStyle = 'rgba(0,0,0,0.25)';
  ctx.fillRect(0,0,width,height);
  while(balls.length < 25) {
    var ball = new Ball(
      random(0,width),
      random(0,height),
      random(-7,7),
      random(-7,7),
      'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
      random(10,20)
    );
    balls.push(ball);
  }
  for(var i = 0; i < balls.length; i++) {
    balls[i].draw();
    balls[i].update();
    balls[i].collisionDetect();
  }
 // auto loop
  requestAnimationFrame(loop);
}

loop();

generator *function & yield

const log = console.log;

const d = document.querySelector(`[id="svg-path"]`);

log(`d`, d);
// d <path id="svg-path" d="M10 10"></path>

function *test() {
  yield d.setAttribute(`d`, `M10 10L10,100`);
  yield d.setAttribute(`stroke`, `#0f0`);
  yield d.setAttribute(`d`, `M10 10L10,100 H200`);
  yield d.setAttribute(`d`, `M10 10L10,100 H200 V10`);
  yield d.setAttribute(`d`, `M10 10L10,100 H200 V10 H10`);
  yield d.setAttribute(`fill`, `#f0f`);
  yield d.setAttribute(`fill`, `#fff7`);
}

let steps = 7;
const loop = () => {
  steps = 7;
  const app = test();
  const flag = setInterval(() => {
    if(steps > 0) {
      steps--;
      app.next(steps);
    } else {
      clearInterval(flag);
      requestAnimationFrame(loop);
    }
  }, 1000);
}
loop();