JSFiddle - React, Tailwind, and code Playground

by Matt Ball

HTML

<button id="clkDblClk">Click me</button>

<pre id="out"></pre>

JavaScript

var $out = $('#out'),
    text = [],
    DATA_KEY = 'clickTimer';

$('#clkDblClk').click(function()
{
    var $this = $(this);
    
    if ($this.data(DATA_KEY)) return;
    
    var clickTimer = setTimeout(function()
    {
        // do other stuff
        
        log('TIMEOUT fired');
        $this.removeData(DATA_KEY);
    }, 1000);
    
    $this.data(DATA_KEY, clickTimer);
    log('CLICK: saving timer ID: ' + clickTimer);
})
.dblclick(function()
{
    var $this = $(this);
    
    var clickTimer = $this.data(DATA_KEY);
    clearTimeout(clickTimer);
    
    $this.removeData(DATA_KEY);
    
    log('DOUBLECLICK: cancelling timer ID: ' + clickTimer);
});

function log(s) {
    text.push(s);
    $out.text(text.join('\n'));
}