CODEWITHSUNDEEP
javascriptjqueryhtmlclickdouble-click
NewUser
NewUser

Reputation: 13323

How to get the time difference between double clicks using jquery?

I want to get the time difference in between two clicks on a single button. I have my markup like this

<a href="#">click here</a>

I am using this code to get the time difference between two clicks.

var clickedTime = '';
var lastClicked = '';
$('body').on('click', 'a', function(e) {
    var d = new Date();
    clickedTime = lastClicked;
    lastClicked = d.getTime();
    console.log(clickedTime);
    console.log(lastClicked);
});

But its showing the same time in both console. So can someone tell me how to get the time difference?

Upvotes: 4

Views: 1572

Answers (2)

Mohammad
Mohammad

Reputation: 21489

You can use Date.prototype.getTime() to get time of click event.

var click = 0;
var time;
var difference;
$("a").click(function(){
    var date = new Date();
    click += 1;
    if (click == 2) {
        difference = date.getTime() - time;
        click = 0;
        console.log(difference);
    }
    else
        time = date.getTime();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<a>Please double click on me!</a>

Or use Event.timeStamp property of event.

var click = 0;
var time;
var difference;
$("a").click(function(e){
    click += 1;
    if (click == 2) {
        difference = e.timeStamp - time;
        click = 0;
        console.log(difference);
    }
    else
        time = e.timeStamp;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<a>Please double click on me!</a>

Note that the codes return diffrence time in milisecond.

Upvotes: 1

Raja Khoury
Raja Khoury

Reputation: 3195

Here is a simple jQuery function to return the time difference in the desired format for every x clicks - Demo

<button>Get Time Difference</button>

(function ($) {
 $.fn.clickTimer = function ($param, $numbClicks) {
    function msTotime(ms) {
        var mill = ms % 1000;
        var seconds = Math.floor((ms / 1000) % 60);
        var minutes = Math.floor((ms / (60 * 1000)) % 60);
        switch ($param) {
            case "ms":
                return ms;
                break;
            case "s":
                return seconds;
                break;
            default:
                return [minutes, seconds, mill];
        }
    }
    var counter = 0;
    var Start_Time;
    this.click(function (event) {
        counter++;
        if (counter == $numbClicks) {
            counter = 0;
            var now = event.timeStamp;
            Diff = now - Start_Time;
            console.log(msTotime(Diff));
        } else {
            Start_Time = event.timeStamp;
        }
    });
    return this;
 };
})(jQuery);

Usage :

$(selector).clickTimer(time format , number of clicks);

 $("button").clickTimer("ms", 2);
 // returns time difference in milliseconds for every 2 clicks

 $("button").clickTimer("s", 2);
 // returns time difference in seconds

 $("button").clickTimer(false, 2);
 // returns an array [minutes, seconds, milliseconds]

Let me know what you think. This is definitely not a perfect solution but it may get you started.

Upvotes: 1

Related Questions