問題描述

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

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

有什么技術(shù)上可以規(guī)避這種情況的實現(xiàn)方案嗎？

問題解答

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

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

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