JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <a>Click me</a>
    <a>And me too!</a>
    <a>And what about me?</a>
</div>
<div id='count'>0</div>

CSS

body {padding-top: 50px; text-align: center; }
a { display: block; padding: 5px; cursor: pointer; }
a:hover { background-color: #DDD; } 
#count { padding: 40px; font-size: 30px; text-align: center; }

JavaScript

$.fn.onDelay = function(events, selector, data, handler, timeout, throttle) {
if ($.isFunction(selector)) {
throttle = handler;
timeout = data;
handler = selector;
data = undefined;
selector = undefined;
} else if ($.isFunction(data)) {
throttle = timeout;
timeout = handler;
handler = data;
data = undefined;
}

// Allow delayed function to be removed with handler in unbind function
handler.guid = handler.guid || ($.guid && $.guid++);

// Bind each separately so that each element has its own delay
return this.each(function() {
    var wait = null;

    function callback() {
        var event = $.extend(true, { }, arguments[0]);
        var that = this;
        var throttler = function() {
            wait = null;
            handler.apply(that, [event]);
        };

        if (!throttle) { clearTimeout(wait); wait = null; }
        if (!wait) { wait = setTimeout(throttler, timeout); }
    }

    callback.guid = handler.guid;

    $(this).on(events, selector, data, callback);
});
}
    
    
    $(function() {
        $("#wrapper").onDelay("click", "a", function() {
            
            var count = $("#count");
            var counter = (parseInt(count.text()) || 0) + 1;
    
           count.text(counter);
        }, 1000);            
    });