javascript - What should I do if the interface return time is inconsistent when using controls such as _.debounce to delay the input delay ajax call?

Question

The onChange event in react's input is bound to a handleOnchange method. After this method is called, the ajax call is delayed. If the user enters "Glory of the King", due to typing speed issues, two requests for "King of Glory" may be sent in the end. ”, “Glory of the King”. .

At this time, the first "King of Glory" request takes longer to return than the second "King of Glory" request. The final rendered result is that the user sees that the input box is "King of Glory", but the result is "King of Glory" "The results are covered.

Is there any technical solution to avoid this situation?

Answer 1

1. Use synchronous ajax (escape)
2. The result returned by the background will bring the requested keyword, and compare it with the current input value
3. Globally maintain an auto-incrementing ID, bring it with each request, and then add it to the field returned by the request. Return this id. If the returned id is consistent with the id of the current page, use the data, otherwise discard it

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

In summary, option 3 is the most versatile. If there are multiple form query conditions on the page, option 2 will be very painful.