Question

我有一个“自动建议”输入。在 setTimeout 函数中的 keyup 上，将发出ajax请求。如果密钥输入，则需要进行搜索，并隐藏建议。

问题是，如果我输入的速度足够快，当按输入时，仍然会显示“自动建议”。我猜第二个keyup（enter）在第一个处理程序有机会停止执行之前被触发，所以首先触发搜索，只有在后这是“自动建议“触发。

如何阻止程序返回并执行第一个处理程序？

修改

以下是代码的一部分：

searchTextInput.bind("keyup.qssb", function(event){ clearTimeout(suggestTimeout); switch(event.keyCode){ case 40: <select option down>; break; case 38: <select option up>; break case 13: jQuery(widget).trigger("search"); break; default: <do some things>; suggestTimeout = setTimeout(startSearch, 200); break; } });

Answer 1

假设问题确实是你所描述的，那么你可以做两件事（一起）来解决它：

发送ajax请求时，存储对该请求的引用。当您收到另一个 keyup 时，请取消该ajax请求。
当您开始执行 onEnter 处理程序时，请设置一些变量以指示不再需要自动建议。在自动建议处理程序中，在ajax返回后，仅显示未设置该变量的建议。

基本上，您的代码结构将类似于（请注意，这是伪代码，并不打算复制到您的应用程序中）：

var ajaxReq == null;
var needSuggestions = true;

$('#textfield').on("keyup", function(e) {
    if(ajaxReq != null) {
        ajaxReq.abort();
        ajaxReq = null;
    }

    if(key is enter) {
        needSuggestions = false;
        execute search;
    }
    else {
        ajaxReq = $.ajax(...,
            done: function() { ajaxReq = null; }
            success: function(data) {
                if(needSuggestions) {
                    display suggestions;
                }
            }
        );
    }
}

Answer 2

这是去抖功能的绝佳用例。只有当用户停止输入时才开始自动建议请求，比方说300ms。例如，请参阅_.debounce()

停止返回执行代码

2 个答案: