Question

我想检查在5秒内是否按了两次Enter键并执行一些操作。如何在给定时间内检查按键是否被按下一次或两次并执行不同的操作。

这是我的代码：

<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/

谢谢！

Answer 1

类似

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


});

Answer 2

尝试基于计时器的解决方案，如

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

    }

});

演示：Fiddle

Answer 3

Bacon.js似乎是表达这一点的好工具。

$(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)

Answer 4

检查 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()开始依靠输入按。 checkCount()包含5secs后的病情。

setTimeout()允许您附加在特定时间段之后发生的事件。

Answer 5

这是我的解决方案，如果符合您的想法请检查：）

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

Javascript - 检查是否在5秒内按下了两次键

5 个答案: