CODEWITHSUNDEEP
javascriptjquery
fart-y-goer
fart-y-goer

Reputation: 739

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 actions.

Here is my code: 

<h1 id="log">0</h1>
<br/>
<span id="enteredTime">0</span>

<script>
$(document).keypress(function(e) {
    if(e.which == 13){
        var element = $("#log");
        var timeDifference = 0;

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

        //Check if enter was pressed earlier
        if ($("#enteredTime").text() !== "0") {
            var now = new Date().getTime();
            var previous = $("#enteredTime").text();
            difference = now - previous;
        }
        //Check if enter was pressed only once within 5 secs or more
        if(){
            $("#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");
        }

    }

});
</script>

http://jsfiddle.net/Rjr4g/

Thanks!

Upvotes: 2

Views: 1580

Answers (5)

Shaunak D
Shaunak D

Reputation: 20626

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(new Date().getTime());

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

    }

});

function startTimer(){
    setTimeout(checkCount,5000);
}

function checkCount(){
        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.

Upvotes: 0

Chris Martin
Chris Martin

Reputation: 30736

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

$(document).asEventStream('keypress')
    .filter(function (x) {
        return x.keyCode == 13;
    })
    .map(function () {
        return new Date().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)

Upvotes: 1

Kai
Kai

Reputation: 3663

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 done
        clearTimeout(watcher);
        count = 0;            
        return;
      }

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

Upvotes: 0

coder hacker
coder hacker

Reputation: 4868

something like

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


});

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

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(new Date().getTime());

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

    }

});

Demo: Fiddle

Upvotes: 1

Related Questions