Pause the gameloop when changing tab

Questions
,
1

I want to pause the gameloop when visibility is changed of the tab. But currently what’s happening is, if we change the visibility, game still continues to run in the background. Maybe according to me it is due to the time. As time continues to run. But what i want is that the loop should stop the time i changed the tab and continues from there only where i left.

Here’s the code of how am handling the gameloop function → 

import EventEmitter from "./EventEmitter.js";

export default class Time extends EventEmitter {
  constructor() {
    super();

    // Setup
    this.start = Date.now();
    this.current = this.start;
    this.elapsed = 0;
    this.delta = 16;

    window.requestAnimationFrame(() => {
      this.tick();
    });
  }

  tick() {
    const currentTime = Date.now();
    this.delta = currentTime - this.current;
    this.current = currentTime;
    this.elapsed = this.current - this.start;

    this.trigger("tick");

    window.requestAnimationFrame(() => {
      this.tick();
    });
  }
}
2 
export default class Time extends EventEmitter {
  constructor() {

document.addEventListener('keydown',e=>{
  if(e.code=='KeyP')this.paused = ! this.paused;
})
....

}

  tick() {
    const currentTime = performance.now();
    this.delta = currentTime - this.current;
    this.current = currentTime;
    this.elapsed = this.current - this.start;
    if( ! this.paused )
        this.trigger("tick");

    window.requestAnimationFrame(() => {
      this.tick();
    });
  }
3

I think you just need to add a paused state and use the onFocus/onBlur handlers