搜索框中的异步ajax调用

Question

几个月前我为客户开发了一个asp.net解决方案，其中我们在输入框中使用AzureSearch。我的做法是从用户最后一次击键后每秒发送一次ajax请求。但是我们的客户希望它始终发生在输入框的变化上，所以我们这样做了。

它导致客户报告一个错误 - 不一致的搜索。这是因为竞争条件，我记录了异步电话，这就是发生了什么事。我正在考虑为javascript自动填充添加0.5秒的延迟。或者，还有更好的方法？像在JavaScript中有一个池。我们使用的控件是jQuery容易的自动完成。

Answer 1

最后我不需要添加延迟或油门。通过检查其官方网站，我发现在jQuery的易自动完成两个非常有用的特性，它们是：

• matchResponseProperty：为了避免竞争条件，自上次Ajax调用musn't neccessarily是从上次响应后端服务，它将采用最后一个响应，该响应具有一个以此属性指定的属性，该属性与输入中的当前文本相匹配。

• listLocation：我试图渲染一个带有匿名列表的项目和一个名为InputPhrase的属性，直到我来到这个，所以我指定了基本响应对象中的列表位置，并使用此模型作为响应。

  public class SearchViewModel 
  { 
      public List<dynamic> Items { get; set; } 
      public string InputPhrase { get; set; } 
  } 
  

最后，我设置matchResponseProperty为“InputPhrase”，并listLocation到“项目”

Answer 2

你在做什么叫做“去抖”。当用户开始输入时，当计时器开始倒计时时，会发生去抖动。如果他们在定时器完成之前输入更多输入，则定时器复位并再次开始倒计时。只有当定时器完成后，AJAX调用才会生效。在这种情况下，200毫秒的延迟是研究表明大多数人认为仍然感觉反应迅速。

但是，如果您确实希望在用户输入时输入结果，您需要的却是所谓的“节流”。节气门类似于去抖动，除了它定期触发，而不是等待输入停止。要构建一个你仍然有计时器，但是，每当用户输入更多的输入时，你都不会重置它。相反，您将使用布尔值来跟踪是否输入了新输入。当计时器结束时，它会检查布尔值是否为真，如果是，则将其设置为false并重新启动计时器倒计时。

通过跟踪AJAX调用是否已经发生，您可以改进任一方法。在这两种情况下，如果定时器用完并且布尔跟踪（如果正在进行调用）为真，则重新启动计时器。

debounce和throttle都已在几个实用程序库（如lodash）中可用。您可以使用它们来包装现有的事件处理程序。

var myInputChangeHandler = function() { 
    // do ajax call 
}; 

// throttled handler will only be called every 200 ms... 
var throttled = _.throttle(myInputChangeHandler, 200); 
// ...no matter how many times this event fires 
jQuery('input[type=text]').on('change', throttled);