Question

我正在尝试为我的网站用户实施像facebook这样的搜索栏。键入名称时，会显示一些结果。为避免发送按下每个按钮的请求，我设置了超时。我的想法是：如果我要输入jack，那么搜索j，ja，jac，jack是没有意义的，但是在发送任何请求之前，最好等待用户完成输入。一旦发送并完成请求，就会向结果（请求响应）提交名为mydiv的div。如果经过一段时间后我输入了另一封信，则会发送另一个请求，mydiv会填充新的结果。

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

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*/
}

如您所见，在超时200ms后，将调用函数get_data_with_ajax_and_put_it_in_mydiv();。此函数在放入新数据之前会清空mydiv。它几乎总是有效，但有时会出现一个奇怪的错误。

我将通过提供一个真实的例子来解释我认为问题所在。我们假设get_data_with_ajax_and_put_it_in_mydiv()需要50毫秒到1000毫秒才能完成，具体取决于各种因素（网络速度，拥塞等）。

在t=0我输入jac并停止输入。
在t=200超时到期且get_data_with_ajax_and_put_it_in_mydiv()运行。在这种情况下，运行需要1000毫秒
在t=210，因为我是一个慢作家，我输入k的{{1}}字母。 jack是空的，因为第一个请求尚未完成。
mydiv t=410个字母的超时时间和第二个请求已发送。这次，该功能需要100ms才能运行。
在k，第二个请求完成，我得到t=510的结果。
在jack第一个请求完成后，我获得t=1200的结果。

错误

正如您所看到的，由于ajax请求所产生的时间不可预测，我得到了错误的结果。 jac已填充mydiv个结果，而非jac。

解

我想到的第一个解决方案如下：每次拨打jack时，我都必须停止之前仍在运行的任何请求。我怎样才能做到这一点？如果不可能，我该如何解决此错误？

Answer 1

为什么不使用debounced函数来处理ajax调用？

http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/

Answer 2

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

http://api.jquery.com/jquery.post/

第二个jQuery.post请求在第一个之前完成。怎么避免这个？

2 个答案: