問題描述

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

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

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

問題解答

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

$.getJSON(’xxx.json?id=1’) 返回數據里 {id:1,data: {...}}

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