問題描述

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

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

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

問題解答

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

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

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