取消上一个 ajax 调用，并在文本发生更改时从头开始

Question

我对keyup事件有一个ajax调用。

任务是显示包含搜索到的学校名称的列表。

第一次搜索名称时，将显示包含的学校列表。

它工作得很好，直到点击退格键并再次输入。

$("#InstName").keyup(function () {  
filter = $("#InstName").val();
textCount = $("#InstName").val().length;
if (filter.length >= 1) {
$("#loading").show();
$("#InstSuggRes").hide();
var currentRequest = null;
currentRequest=$.ajax({
type: "POST",
url: "libAjaxFunctions.asp?cmd=GetInstSuggestion&instFilter=" + filter,
cache: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function () {
if (currentRequest != null) {
currentRequest.abort();
}
},
success: function (data) {
ajaxCount = ajaxCount + 1;
var instSugg = "";
$.each(data.Institutions, function (index, element) {
if (instSugg == "") {
instSugg = element;
}
else {
instSugg = instSugg + "<br>" + element;
}
});
debugger;
if (textCount == ajaxCount) {
$("#loading").hide();
$("#InstSuggRes").show();
$("#InstSuggRes").html(instSugg);
}
},
error: function (response) {
$("#loading").hide();
$("#InstSuggRes").show();
$("#InstSuggRes").html("No matching Institution");
}
});
}
else {
$("#loading").hide();
$("#InstSuggRes").html("");
}
});

这就是我到目前为止尝试过的。

Answer 1

与其取消 AJAX 请求(这只会阻止客户端等待响应，服务器仍然接收并处理它(，不如"去反弹"事件。

去抖动意味着您添加一个非常轻微的延迟，以便如果在延迟到期之前重复延迟，则不会发送 AJAX 请求。因此，它通过减少需求来提高服务器性能。试试这个：

let keydelay;
let $instSuggRes = $("#InstSuggRes");
let $loading = $('#loading');
let $instName = $("#InstName").keyup(function() {
clearTimeout(keydelay);
keydelay = setTimeout(function() {
filter = $instName.val();
textCount = filter.length;
if (filter.length >= 1) {
$loading.show();
$instSuggRes.hide();
$.ajax({
type: "POST",
url: "libAjaxFunctions.asp?cmd=GetInstSuggestion&instFilter=" + filter,
cache: false,
dataType: "json",
success: function(data) {
var instSugg = data.Institutions.join('<br />');
$instSuggRes.html(instSugg).show();
},
error: function(response) {
$instSuggRes.html("No matching Institution").show();
},
complete: function() {
$loading.hide();
}
});
} else {
$loading.hide();
$instSuggRes.empty();
}
}, 200);
});

请注意，我做了一些调整来稍微改进逻辑，例如缓存从选择器创建的 jQuery 对象以减少 DOM 访问的数量，链接一些方法，以及使用join()构建字符串而不是$.each()循环。

Answer 2

如果您正在寻找要加载的微调器，请输入 setTimeout(( 并以毫秒为单位添加所需的时间。 https://www.w3schools.com/jsref/met_win_settimeout.asp