Question

window.addEventListener('keydown', function(event) {
     onKeyDownHandler(event);
}, false);


function onKeyDownHandler(e)
{
    var focus_id = e.target.id;
    switch (e.keyCode) {
          case 13: // enter
          if(focus_id == "Text1")
          {
            alert("function 1");
          }else if(focus_id == "Text2")
          {
            alert("function 2");
          }else if(focus_id == "Text3")
          {
            alert("function 3");
          }
          return;
    }
}

无论如何我可以通过点击输入来延迟或确保用户不发送垃圾邮件，如何在我的输入按钮上设置按键延迟？哪个是设置延迟计时器或删除EventListener的最佳方法？

Answer 1

您可以使用jQuery throttle/debounce插件仅在keyDown事件暂停时处理调用您的函数。

Answer 2

您可以在最后一次Enter按键后的一段时间内阻止默认操作：

window.addEventListener('keydown', onKeyDownHandler, false);
var lastEnter = null;
function onKeyDownHandler(e) {
    var focus_id = e.target.id;
    switch (e.which || e.keyCode) { // Note the e.which, for x-browser compat
        case 13:
            if (lastEnter && Date.now() - lastEnter < 5000) {
                e.preventDefault();
                return;
            }
            lastEnter = Date.now();

            // Enter key processing...
            break;
        // ...other keys...
    }
}

或者使用jQuery（您已经标记了问题jquery，但似乎没有在您的代码中使用jQuery）：

$(window).on("keydown", function(e) {
    onKeyDownHandler(e);
});
var lastEnter = null;
function onKeyDownHandler(e) {
    var focus_id = e.target.id;
    switch (e.which) { // jQuery normalizes this for you
        case 13:
            if (lastEnter && Date.now() - lastEnter < 5000) {
                e.preventDefault();
                return;
            }
            lastEnter = Date.now();

            // Enter key processing...
            break;
        // ...other keys...
    }
}

附注：

由于完全忽略了addEventListener回调的返回值，并且addEventListener只使用一个参数调用处理程序，如果您未在处理程序中使用this（因为你似乎不是），没有必要围绕onKeyDownHandler包裹一个函数;直接使用它。
有些浏览器使用which作为键码，其他浏览器使用keyCode，这就是我在e.which || e.keyCode中使用switch的原因。 JavaScript非常强大的||运算符如果不是假的话会使用e.which，否则会e.keyCode。

Answer 3

您可以在输入按下时创建超时，在另一个输入按下时，用新的超时覆盖先前的超时。这意味着，如果您例如在第一个超时结束之前再次按Enter键，则第一个超时将被新的超时覆盖，以便在执行实际超时之前获得新的x时间量。这一直有效。

示例：

var keyup_timeout;
var timeout_delay_in_ms = 500;

element.on('keyup', function(e) {
    e.preventDefault(); // Prevent default enter press action.
    var enter_pressed;

    if (e.which === 13) {
        enter_pressed = true; // Just an example to illustrate what you could do.
    }

    if (enter_pressed) {
        clearTimeout(keyup_timeout); // Clear the previous timeout so that it won't be executed any more. It will be overwritten by a new one below.

        keyup_timeout = setTimeout(function() {

            // Perform your magic here.

        }, timeout_delay_in_ms);
    }
});

如何延迟按键输入

3 个答案: