我遇到了 AJAX typeahead/live-update as-you-type View 的问题,这些 View 返回的结果乱序。有没有人有处理这个问题的方法的经验?
问题:
- 输入查询,例如“搜索词”。
- 即使有一些去抖动,它也可能会在您键入时触发一些 AJAX 调用,比如
"sea"
, 和"search term"
. -
sea
的搜索结果集大于search term
的那个,因此它的 AJAX 请求实际上在较新的查询之后完成。 - 由此产生的问题:您输入
search term
, 但正确的结果在屏幕上闪过一秒钟,然后被sea
的结果所取代。 .
基本的 jQuery 伪代码:
$('body').on('keyup', '#searchBox', function(){
query = $("#searchBox").val();
$.ajax({
type: 'GET',
url: '/endpoint.php?query=' + query,
success: function (response) {
// Update view here
$("#view").html(response.text);
}
});
});
Angular 伪代码:
// HTML
<input ng-keyup = "search()" ng-model="searchBox" placeholder = "Search">
{{results}}
// JS
$scope.search = function(){
$http({
method: 'GET',
url: '/endpoint.php?query=' + $scope.searchBox
}).then(function successCallback(response) {
$scope.results = response.data;
}, function errorCallback(response) {
console.log(response);
});
}
最佳答案
顶部停止竞争条件,您可以保留对您发出的最后一个 AJAX 请求的引用,然后在按下新键时 abort()
它。在发出请求之前延迟也是值得的,这样您就不会为每个按下的键发送请求,而是在键入结束时发送请求。试试这个:
var previousRequest, previousTimer;
$('body').on('keyup', '#searchBox', function() {
previousRequest && previousRequest.abort();
clearTimeout(previousTimer);
previousTimer = setTimeout(function() {
previousRequest = $.ajax({
type: 'GET',
url: '/endpoint.php',
data: {
query: $("#searchBox").val()
},
success: function (response) {
// Update view here
$("#view").html(response.text);
}
});
}, 200);
});
击键间隔 200 毫秒足够了,但如果您想提高请求的响应速度,可以缩短。
关于javascript - JS AJAX typeahead 结果排序/竞争条件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35179831/