Javascript 第二个jQuery.post请求在第一个请求之前完成。如何避免这种情况？

我正在尝试为我的网站用户实现一个类似facebook的搜索栏。键入名称时，会显示一些结果。 为了避免对每个按下的按钮发送请求，我设置了一个超时。想法是：如果我要键入

jack

，搜索

j

、

ja

、

jac

、

jac

，

jack

，是没有意义的，但最好等到用户完成键入后再发送任何请求。 一旦请求被发送并完成，一个名为

mydiv

的div将与结果一起归档（请求响应）。如果在足够长的时间后，我键入了另一封信，则会发送另一个请求，

mydiv

将填充新的结果

这个想法来自于。 这是我的简化实现

var thread = null;    

$('#search-user').keyup(function() {
  clearTimeout(thread);
  name = $('this').val(); //i get the name just typed
  thread = setTimeout(function(){ 
    get_data_with_ajax_and_put_it_in_mydiv(name);
  }, 200);              
});

function get_data_with_ajax_and_put_it_in_mydiv(name){
  $.post()....
  /*Do some stuff*/
}

如您所见，在200毫秒超时后，函数

get_data_与_ajax_和_put_it_放入_mydiv（）被调用。此函数用于在放入新数据之前清空mydiv。它几乎总是工作，但有时会出现一个奇怪的错误

我将通过提供一个真实的例子来解释我认为问题所在。让我们假设
使用\u ajax\u获取数据并将其放入\u mydiv（）
需要50到1000毫秒才能完成，这取决于各种因素（网络速度、拥塞等）


在
t=0
i输入
jac
并停止输入
在
t=200时
超时过期，然后
使用\u ajax\u获取\u数据，\u并将其放入\u mydiv（）
运行。在这种情况下，运行需要1000毫秒
在
t=210
处，因为我写得很慢，所以我键入了
jack
的字母
k
mydiv
为空，因为
第一个请求尚未完成
在
t=410
时，字母
k
epires和第二个请求的超时
他被派去了。这一次，函数需要100毫秒才能运行
在
t=510
时，第二个请求完成，我得到了
jack
的结果
在
t=1200
时，第一个请求完成，我得到了
jac
的结果

错误

正如您所看到的，由于ajax请求所花费的时间不可预测，我得到了一个错误的结果
mydiv
填充的是
jac
结果，而不是
jack

解决方案

我想到的第一个解决方案是：每次调用
get\u data\u with\u ajax\u并将其放入\u mydiv（）
时，我都必须停止之前仍在运行的任何请求。我该怎么做？如果不可能，如何修复此错误？
为什么不使用取消公告的函数来处理ajax调用

您应该使用Promise接口并使用“done”方法按顺序链接这两个操作

中止以前的请求听起来是个好主意。下面是如何中止Ajax请求：快速而肮脏的解决方案是在返回的结果中包含搜索字符串，并将其与上次发送的搜索字符串进行比较。如果不一样，就忽略结果。尝试向请求发送时间戳并返回相同的时间戳。您将这个时间戳存储在一个全局变量中，并在每个请求中更新它。请求完成后，在更新div内容之前，请检查时间戳是否与请求相同。您将始终在div上显示最后一个请求结果。您也可以按照@Christofer Eliasson的建议中止该请求，但仍有可能中止该请求只是太晚了一小部分。我按照Christofer Eliasson的建议进行了操作，它似乎起到了作用……尝试了50次，没有出现错误，而之前我出现了4-5次错误@马特伯兰你是什么意思？这是一个选择，但在这种特殊情况下，它似乎没有必要。如果已经收到对
jack
的响应，那么没有人关心对
jac
的请求的结果，那么为什么要浪费时间等待它完成呢？在后一个请求不能完全取代前一个请求的其他场景中，这将是处理它的方法。