JSFiddle - React, Tailwind, and code Playground

by Palpatim

HTML

<div class="myelement">My element</div>
<button id="toggleButton">Toggle</button>
<button id="createButton">Create</button>
<button id="destroyButton">Destroy</button>

JavaScript

'use strict';

var tt;
$('#destroyButton').click(function() {
    tt.destroy();
    tt = null;
});

$('#createButton').click(function() {
    tt = tt || new TimedToggler($('#toggleButton'), $('.myelement'));
});

function TimedToggler($triggerEl, $toggleEl) {
    this.$triggerEl = $triggerEl;
    this.$triggerEl.removeAttr('disabled');
    this.$toggleEl = $toggleEl;
    this._clickHandler = this.getTimedToggleHandler();
    this._toggleTimer = this.getToggleTimer();
    this.$triggerEl.click(this._clickHandler);
}

TimedToggler.prototype.getTimedToggleHandler = function () {
    var that = this;
    return function timedToggle(e) {
        that.$toggleEl.toggle();
        that.$triggerEl.attr('disabled', true);
        that._currentTimer = window.setTimeout(that._toggleTimer, 1000);
    };
}

TimedToggler.prototype.getToggleTimer = function () {
    var that = this;
    return function toggleTimer() {
        that.$triggerEl.removeAttr('disabled');
    }
}

TimedToggler.prototype.destroy = function() {
    window.clearTimeout(this._currentTimer);
    this.$triggerEl.off('click', this._clickHandler);
    this._clickHandler = null;
    this._toggleTimer = null;
    this.$triggerEl = null;
    this.$toggleEl = null;
}