搜索框中的異步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);