JSFiddle - React, Tailwind, and code Playground

by mehmetatas

HTML

<input type="button" value="Start" onclick="startStop(this);" />
<input type="text" id="txt" style="width: 500px" />

JavaScript

function Timer(func, interval) {
    var _func = func;
    var _interval = interval;

    var _timer;
    var _isRunning = false;

    this.start = function() {
        _timer = setInterval(_func, _interval);
        _isRunning = true;
    };

    this.stop = function() {
        clearInterval(_timer);
        _isRunning = false;
    };

    this.isRunning = function() {
        return _isRunning;
    };

    this.getInterval = function() {
        return _interval;
    };

    this.setInterval = function(interval) {
        _interval = interval;
        if (_isRunning) {
            this.stop();
            this.start();
        }
    };

    this.setFunction = function(func) {
        _func = func;
        if (_isRunning) {
            this.stop();
            this.start();
        }
    };
}

var tmr = null;
var i = 0;

function startStop(btn) {
    if (tmr === null) {
        tmr = new Timer(function() {
            document.getElementById("txt").value = new Date().toString();
            i++;
            if (i == 3) {
                tmr.setFunction(function() {
                    document.getElementById("txt").value = "New " + new Date().toString();
                    i++;
                    if (i == 6) {
                        tmr.setInterval(1000);
                    }
                });
            }
        }, 2000);
    }
    if (tmr.isRunning()) {
        i = 0;
        tmr.stop();
        btn.value = "Start";
    }
    else {
        tmr.start();
        btn.value = "Stop";
    }
}