Javascript 防止在按住enter键时多次调用keypress方法

我正在使用HTML输入标记制作一个简单的搜索栏：

<input type="text" id="search_bar" />

但是，如果用户决定按住enter键，则会多次调用此方法。我想禁用此行为，即当用户按下enter键时，

keypress

仅调用一次，但在按住该键时不会再次调用。实现这一目标的最佳方式是什么

---

谢谢。

尝试使用

keydown

或

keydup

。这可能会更改

keycode

值。

尝试改用或事件。它们仅在按键从一种状态切换到另一种状态时才会触发。

您可以使用计时器，因为您所经历的是按键的行为（

向上键

和

向下键

可用于计算按键次数，但可能很难跟踪所有按键）

使用

onkeyup（）

将仅检测钥匙何时释放。这应该可以解决你的等待问题

$('#search_bar').keyup(function(e) {
    if(e.keyCode == 13 && !e.shiftKey) { // enter/return
        e.preventDefault();
        console.log("xx");
    }
});

按住enter键--xx仅在发布时记录

---

小提琴手：

现在回答上述问题有点晚了。但我建议，该函数只会在几秒钟内触发一次，而不是以触发的速度触发。这无疑有助于提高性能

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

var apiRequestFunction = debounce(function() {
 //send an AJAX network request.
 //250 indicates the minimum time interval between the series of events being fired
}, 250);

$('#search_bar').keypress(function(e) {
        e.preventDefault();
        //do stuff
        //Function call to send an AJAX network request
        apiRequestFunction();
});

---

尝试改用onkeyup方法

onkeyup

是检测按键的传统行为。当按住一个键时，会多次触发按键事件。只有当您的答案帮助我解决vue问题时，才会触发keyup事件。。谢谢：）

$('#search_bar').keyup(function(e) {
    if(e.keyCode == 13 && !e.shiftKey) { // enter/return
        e.preventDefault();
        console.log("xx");
    }
});

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

var apiRequestFunction = debounce(function() {
 //send an AJAX network request.
 //250 indicates the minimum time interval between the series of events being fired
}, 250);

$('#search_bar').keypress(function(e) {
        e.preventDefault();
        //do stuff
        //Function call to send an AJAX network request
        apiRequestFunction();
});