Detect time lapse between two key press in Javascript

Question

I am learning javascript and at the same time trying to create a simple script that allows you to type a foreign language on a web browser with your keyboard.

So, when you type a for example, there is a single letter mapped to a, so a single character Դ would appear, however to make a character like 厄 appear, you have to type twice, since this language has more characters than the English alphabet.

So, the problem is with that last character. Normally, I should have to type g and h consecutively in the span of one second to produce the 厄 letter, but I have problems waiting to check if within two characters have been typed within one second of eachother inorder to show that letter.

So, I don't think time interval functions are the way to go about this, but I can't see any other method also.

Answer 1

Like Alex mentioned, for every press, simply store new Date().getTime(); in a variable, which will get you the latest UTC time. UTC time is given in milliseconds, so on the next key-press, just see if the current time and the stored time differ by 1000!

Answer 2

Below is the sample code to measure the elapsed time between any 2 events. I added setTimeout just to give you an example.

 var startTime = Date.now(); setTimeout(function(){ var elapsedTime = Date.now() - startTime; console.log('elapsedTime ='+elapsedTime); }, 100); 

Answer 3

cautions: check key whether up in keydown() & notify keydown the key is upped in keypress();

  var start = null; $('#in').keydown(function (e) { if (!start) {//checking is a new user input start = $.now(); } }).keyup(function (e) { var timeElapsed = $.now() - start; start = null;//start the next timing tracking console.log(['time elapsed:', timeElapsed, 'ms'].join(' ')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label> <h2>please input some letter to test</h2> <input id="in"/> </label> 

Answer 4

another answer about your question,perhaps this is your truly answer.

  function duration(timestamps) { var last = timestamps.pop(); var durations = []; while (timestamps.length) { durations.push(last - (last = timestamps.pop())); } return durations.reverse(); } function display(mills) { if (mills > 1000) return (mills / 1000) + ' s'; return mills + ' ms'; } var durations = []; $('#in').keydown(function (e) { durations.push($.now()); }).keyup(function (e) { var current = durations; current.push($.now()); durations = []; var timeElapsed = current[current.length - 1] - current[0]; console.log([ ['time elapsed:', display(timeElapsed)].join(' '), ['keys duration:', duration(current).map(display)].join(' ') ].join(' --- ')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label> <h2>Please input something to test!</h2> <input id="in"/> </label>