ClearTimeout Is Not Working

SetTimeout is not working for the follwing code: $('#clkDblClk').click(function(){ var clickTimer=setTimeout(function(){ //Some code to execute

Solution 1:

There is no way to distinguish between a click and a double-click, so every double-click also triggers two separate click events. Each of those click events is also starting the setTimeout, but it overwrites the .data('clickTimer') value.

---

Here's the proof: http://jsfiddle.net/mattball/Az6zY/

---

One solution is to debounce the click event. Really simple implementation:

var DATA_KEY = 'clickTimer';

$('#clkDblClk').click(function()
{
    var $this = $(this);

    if ($this.data(DATA_KEY)) return;

    var clickTimer = setTimeout(function()
    {
        // do other stuff

        $this.removeData(DATA_KEY);
    }, 1000);

    $this.data(DATA_KEY, clickTimer);
})
.dblclick(function()
{
    var $this = $(this);

    var clickTimer = $this.data(DATA_KEY);
    clearTimeout(clickTimer);

    $this.removeData(DATA_KEY);
});

Demo: http://jsfiddle.net/mattball/B5MSw/