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?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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
In summary, option 3 is the most versatile. If there are multiple form query conditions on the page, option 2 will be very painful.