Javascript - Check If Key Was Pressed Twice Within 5 Secs

I want to check if Enter key was pressed twice within 5 secs and perform some action. How can I check if the key was pressed once or twice within a given time and perform different

Solution 1:

something like

var start=0;
$(document).keyup(function(e) {
    if(e.keyCode == 13) {
        elapsed = newDate().getTime();
        if(elapsed-start<=5000){
           //do something;
        }
        else{
            //do something else;
        }
        start=elapsed;
    }


});

Solution 2:

Try a timer based solution like

var flag = false,
    timer;
$(document).keypress(function (e) {
    var element = $("#log");
    var timeDifference = 0;

    if (e.which == 13) {
        if (flag) {
            console.log('second');
            clearTimeout(timer);
            flag = false;
        } else {
            console.log('first');
            flag = true;
            timer = setTimeout(function () {
                flag = false;
                console.log('timeout')
            }, 5000);
        }


        //Log the timestamp after pressing Enter
        $("#enteredTime").text(newDate().getTime());

        if ($("#enteredTime").text() !== "0") {
            var now = newDate().getTime();
            var previous = $("#enteredTime").text();
            difference = now - previous;
        }

    }

});

Demo: Fiddle

Solution 3:

Bacon.js seems like a good tool to express this.

$(document).asEventStream('keypress')
    .filter(function (x) {
        return x.keyCode == 13;
    })
    .map(function () {
        returnnewDate().getTime();
    })
    .slidingWindow(2, 1)
    .map(function (x) {
        return (x.length == 1 || x[1] - x[0] > 5000) ? 1 : 2;
    })
    .onValue(function (x) {
        $("#log").text(x == 1 ? "Once" : "Twice in less than 5 secs");
    });

(fiddle)

Solution 4:

here is my solutions, please check it if match your idea :)

(function($){
  var element = $("#log");
  var timeDifference = 0;
  var count = 0;

  $(document).keypress(function(e) {
    if(e.which === 13){
      //do what you want when enterpress 1st time/*blah blah *///after done 1st click
      count++;

      if(count === 2) { 
        //do what you want when enterpress 2nd time in 5 seconds /* blah blah *///after doneclearTimeout(watcher);
        count = 0;            
        return;
      }

      //setTimeout to reset count if more than 5 seconds.var watcher = setTimeout( function() {
         count = 0;
      },5000);
    }
 });           
}(jQuery)

Solution 5:

Check your Updated Fiddle

var count = 0;

$(document).keypress(function(e) {
    var element = $("#log");
    var timeDifference = 0;

    if(e.which == 13){

        count++;
        console.log('enter pressed'+count);
        if(count == 1){
            startTimer();
        }
        else{
            checkCount();
        }
        //Log the timestamp after pressing Enter
        $("#enteredTime").text(newDate().getTime());

        if ($("#enteredTime").text() !== "0") {
            var now = newDate().getTime();
            var previous = $("#enteredTime").text();
            difference = now - previous;
        }

    }

});

functionstartTimer(){
    setTimeout(checkCount,5000);
}

functioncheckCount(){
        if(count == 1){
             $("#log").text("Once");
             $("#enteredTime").text("0");
        //Check if enter was pressed twice in 5 secs
        }else{
             $("#log").text("Twice in less than 5 secs");
             $("#enteredTime").text("0");
        }
}

---

startTimer() starts counting on first enter press. And checkCount() contains your condition after 5secs.

setTimeout() lets you attach an event which occurs after a specific timespan.