Detect how long an HTML button is pressed

Question

I recently had the need to detect how long a button is pressed and perform different actions based on that. I found some examples on Stack Overflow, but the ones I looked at showed how to use timeout().

I came up with this. There are probably other ways to solve this. While searching, I found an example using IIFE in JavaScript, which I then used for this tiny example.

HTML:

<button id="button">click</button>

JavaScript:

(function(window, document, undefined){
    'use strict';
    var start;
    var end;
    var delta;
    var button = document.getElementById("button");

    button.addEventListener("mousedown", function(){
        start = new Date();
    });

    button.addEventListener("mouseup", function() {
        end = new Date();
        delta = end - start;
        if (delta > 0 && delta < 500) {
            alert("less than half second:");
        }
        if (delta > 1000) {
            alert("more than a second:");
        }
    });
})(window, document);

Answer 1

500 and 1000 should be constants.

Where you have them now you need to look through to find them in code when you want to change them. I know this is an example, but they're also meaningless. 500 doesn't tell you why half a second matters, but TIMEOUT tells you what the purpose of the number is. Declare your time values at the top of the function with clear names that denote what they're for.

Answer 2

The end variable could be removed and you could add a return in the if statements.

You could use Date.now() instead of creating a new Date object if Internet Explorer < 9 is not a problem. And the "delta > 0" is technically not required.

Answer 3

window and document are global variables. You don't need to pass them into your function. Why have undefined as a third variable?

Also, better practice is to only use the word var once. So it would be something like this:

var start,
    end,
    delta,
    button = document.getElementById('button');