JSFiddle - React, Tailwind, and code Playground

by jmjpro

HTML

<input type="button" value="pause" onclick="timer.pause()">
<input type="button" value="resume" onclick="timer.resume()">
<div>Interval time remaining <b id="counter">5</b></div>

JavaScript

function RecurringTimer(callback, delay) {
    var timerId, start;
    this.remaining = delay;

    this.pause = function() {
        window.clearTimeout(timerId);
        this.remaining -= new Date() - start;
    };

    var resume = function() {
        start = new Date();
        timerId = window.setTimeout(function() {
            this.remaining = delay;
            resume();
            callback();
        }, this.remaining);
    };
    
    this.resume = resume;

    this.resume();
}

var intervalSec = 5;
var timer = new RecurringTimer(function(){}, intervalSec * 1000);
setInterval(function() {
    document.getElementById("counter").innerHTML = timer.remaining/1000;
}, 1000);