Ttykuu

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);

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.

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.

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');

just so everyone knows, this solution does not work on my browser, which is Iron Version 65.0.3400.0 (Official Build) (64-bit) (Iron is based on Chrome, so if I had to guess I'd suspect this also doesn't work with the latest Chrome anymore). The problem is that buttons seem to immediately fire an event when clicked. This can be fixed by just changing the html to use: <div id="button">click</button> or you can just give most any other element the id of "button" and it should work. Here's an example of a fiddle I made which uses a font-awesome icon which has been given the id "button": https://jsfiddle.net/f6a1cys9/2/