在react的input里面的 onChange 事件绑定了一个 handleOnchange 方法,这个方法调用后延时进行 ajax 调用,如果用户输入 “王者荣耀”,由于打字速度问题,最后可能会发送两个请求 “王者” 、“王者荣耀”。。
这时候第一个“王者“的请求比第二个”王者荣耀“的请求返回更久,那最后渲染出来的结果就是用户看到输入框是”王者荣耀“,但是结果被”王者“的结果给覆盖了。
有什么技术上可以规避这种情况的实现方案吗?
1、使用同步 ajax (逃 2、后台返回的结果带上请求的keyword,和当前 input 的值做比较3、全局维护一个自增 id,每个请求带上,请求返回的字段里再返回这个 id,如果这个返回 id 和当前页面的 id 一致,使用数据,否则丢掉
$.getJSON('xxx.json?id=1') 返回数据里 {id:1,data: {...}}
综上所述,方案 3 最通用,如果页面上有多个表单查询条件,方案 2 就很痛苦了。
1、使用同步 ajax (逃
2、后台返回的结果带上请求的keyword,和当前 input 的值做比较
3、全局维护一个自增 id,每个请求带上,请求返回的字段里再返回这个 id,如果这个返回 id 和当前页面的 id 一致,使用数据,否则丢掉
综上所述,方案 3 最通用,如果页面上有多个表单查询条件,方案 2 就很痛苦了。