Building an object-oriented timer that stops when user switch tabs

Question

I was wondering if there is a nicer object oriented way of creating this timer? (without global vars!)

let secondsPassed = 0;
let timerId;

function startTimer() {
  clearInterval(timerId);
  timerId = setInterval(function() {
    const seconds = twoDigits((Math.floor(secondsPassed )) % 60);
    const minutes = twoDigits(Math.floor(secondsPassed / 60) % 60);
    const hours = Math.floor(secondsPassed / 60 / 60);
    $('#timer').text(`${hours}:${minutes}:${seconds}`);
    secondsPassed++;
  }, 1000);
  
  $(window).blur(function() {
      clearInterval(timerId) // stop timer when user leaves tab
  });
  
  $(window).focus(function() {
    startTimer(); // continue timer when user comes back
  });
}

Answer 1

Your current implementation is actually wrong. Every time you call startTimer, it installs startTimer as a new window focus event handler, leading to multiple started intervals when you focus the window the second time; growing exponentially. The onfocus handler should only run the timerId = setInterval(…) line - put that in a nested helper function to call only that.

This also makes it unnecessary to declare the variables globally.

function createTimer() {
  let secondsPassed = 0;
  let timerId;
  function resume() {
    if (timerId) return; // prevent multiple intervals running at the same time
    timerId = setInterval(() => {
      const seconds = twoDigits((Math.floor(secondsPassed )) % 60);
      const minutes = twoDigits(Math.floor(secondsPassed / 60) % 60);
      const hours = Math.floor(secondsPassed / 60 / 60);
      $('#timer').text(`${hours}:${minutes}:${seconds}`);
      secondsPassed++;
    }, 1000);
  }
  function pause() {
    clearInterval(timerId);
    timerId = undefined;
  }

  $(window).blur(pause); // stop timer when user leaves tab
  $(window).focus(resume); // continue timer when user comes back

  resume(); // now start the timer
}

Now how to make that object-oriented? Just return an object from createTimer. Put resume and pause as methods on that object. Maybe add some more methods for starting, stopping, resetting, whatever you need. Maybe use a property on the object instead of the secondsPassed local variable. Or expose the local variable using a getter.

And to make it reusable, of course you can make createTimer accept arguments, from the selector of the output element, to the output element itself, to a callback function that will be called with the current time on every tick.

Answer 2

Edit: With this answer, you have to implement the Timer class yourself first. The code only shows how you could name the methods of the timer, how you create the instance and call its functions. The timer should (principle "separation of concerns") only handle the counting and provide the functionalities needed, like starting and stopping.

If you want to have an OOP solution for your timer, you shouldn't let the Timer class know the ID of the DOM container (like one of your comments to your question suggested).

You should read into the topic using this: https://appdividend.com/2019/05/22/javascript-class-example-how-to-use-class-in-javascript-tutorial/

Let us assume, that you already implemented the class. Your code above should look like the following:

// Create own scope for the function, so that variable are not assigned to windows-object.
(function() {
    let secondsPassed = 0;

    let timer = new Timer();
    // events, if necessary
    timer.onTick((seconds) => { secondsPassed = seconds });
    timer.onStop(() => { secondsPassed = 0; })

    // Called by a button
    function startTimer() {
        timer.start();
    }

    // Example: Display alert with current timer seconds on click
    function displaySecondsOfTimer() {
        alert(timer.getSeconds());
    }

    $(window).blur(function() {
        timer.stop(); // stop timer when user leaves tab
    });

    $(window).focus(function() {
        timer.start(); // continue timer when user comes back
    });
})();

So I think, you have a good example to code your first Timer class in native JavaScript! :)