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、使用同步 ajax (逃
2、后台返回的结果带上请求的keyword，和当前 input 的值做比较
3、全局维护一个自增 id，每个请求带上，请求返回的字段里再返回这个 id，如果这个返回 id 和当前页面的 id 一致，使用数据，否则丢掉
综上所述，方案 3 最通用，如果页面上有多个表单查询条件，方案 2 就很痛苦了。