javascript - 使用 _.debounce 之類的控制 input 延時 ajax 調用，介面返回時間不一致怎麼辦呢？

Question

在react的input裡面的onChange 事件綁定了一個handleOnchange 方法，這個方法調用後延時進行ajax 調用，如果用戶輸入“王者榮耀”，由於打字速度問題，最後可能會發送兩個請求“王者」 、「王者榮耀」。 。

這時候第一個“王者“的請求比第二個”王者榮耀“的請求返回更久，那最後渲染出來的結果就是用戶看到輸入框是”王者榮耀“，但是結果被”王者「的結果給覆蓋了。

有什麼技術上可以規避這種情況的實現方案嗎？

Answer 1

1、使用同步ajax (逃
2、後台返回的結果帶上請求的keyword，和當前input 的值做比較
3、全局維護一個自增id，每個請求帶上，請求返回的字段裡再返回這個id，如果這個返回id 和當前頁面的id 一致，使用數據，否則丟掉

$.getJSON('xxx.json?id=1') 
返回数据里  {id:1,data: {...}}

綜上所述，方案 3 最通用，如果頁面上有多個表單查詢條件，方案 2 就很痛苦了。