Javascript/JQuery Handle Double Click

Recently I have been working on JavaScript/Query & SharePoint client side extensively. I will be posting my learnings during the past one year in the coming few posts. 

Recently I was presented with a problem that the custom solution I had provided, did not behave properly when double clicked. 

Scrapping through the web, I fumbled on couple of solutions. I personally like the first approach as it is very simple. 

First Approach:
Click Me

$("#clickMe").click(function (e) {
    var $this = $(this);
    if ($this.hasClass('clicked')){
        alert("Double click");
        //here is your code for double click
        return;
    }else{
         $this.addClass('clicked');
        //your code for single click
         setTimeout(function() { 
                 $this.removeClass('clicked'); },500);
    }//end of else
});


Second Approach:

var DELAY = 700, clicks = 0, timer = null;

$(function(){

    $("a").on("click", function(e){

        clicks++;  //count clicks

        if(clicks === 1) {

            timer = setTimeout(function() {

                alert("Single Click");  //perform single-click action    
                clicks = 0;             //after action performed, reset counter

            }, DELAY);

        } else {

            clearTimeout(timer);    //prevent single-click action
            alert("Double Click");  //perform double-click action
            clicks = 0;             //after action performed, reset counter
        }

    })
    .on("dblclick", function(e){
        e.preventDefault();  //cancel system double-click event
    });

});