江苏龙网

  1. 首页 > 生活 > >

Ajax回调按发起请求的顺序执行

记录每一个请求的发起时间，然后每个请求回来后先判断当前展示在页面上的数据的发起时间，如果本次返回的结果的发起时间晚于当前显示的数据的发起时间，就替换，否则不替换。看代码：(function(){ var lastShowedResult = 0//当前显示的结果的请求时间，初始为0 $(\u0026#39;input\u0026#39;).keyup(function(){ var requestTime = +Date.now()//每次发请求时记录一下时间，转换成数字，注意在闭包里面 $.get(url, function(data){ if (requestTime \u0026gt; lastShowedResult) {//请求拿到后判断是否晚于当前正显示的内容的发起时间，如果是，则 lastShowedResult = requestTime//替换当前显示结果的发起时间 showResult(data)//替换页面上的内容 } }) })})()
■网友
其实你想要的不是顺序执行，而是如果一个前面的请求返回的话，不要覆盖后面的请求。所以一个可行的方案应该是把请求和结果联系起来。req1 -\u0026gt; res1req2 -\u0026gt; res2req3 -\u0026gt; res3都存到一个array里面这样子每次ajax返回的时候，第一步是更新这个包含了所有结果的array，第二步才是决定要不要修改DOM
■网友
回答里前两位的方法都是可行的，可根据具体业务需求选择，伪代码如下：维护请求响应对象版本： //显示查询结果的页面容器 var searchResult = $(\u0026#39;#searchResult\u0026#39;); //查询对象 var searchResultObj = { version: 0, body: {} }; $(document).on(\u0026#39;keyup\u0026#39;, \u0026#39;#keywords\u0026#39;, function () { var q = $(this).val(), isDelay = q.length == 2, keyCode = window.event.keyCode, key = String.fromCharCode(keyCode), requestIndex = 0; //每发起一次请求，请求版本加1 requestIndex = ++searchResultObj.version; $.get(\u0026#39;/home/ResponseByRequest\u0026#39;, { q: key, isDelay: isDelay }, function (data) { if (requestIndex == searchResultObj.version) { searchResultObj.body = { req: key, res: data }; searchResult.append(searchResultObj.body.res + \u0026#39;\u0026lt;hr/\u0026gt;\u0026#39;); } else { console.log(\u0026#39;delay.....\u0026#39; + key); } }) })调用XMLHttpRequest 对象abort版本：相关链接：终止jQuery的$.ajax方法abort //显示查询结果的页面容器 var searchResult = $(\u0026#39;#searchResult\u0026#39;); //查询ajax对象 var searchAjax = null; $(document).on(\u0026#39;keyup\u0026#39;, \u0026#39;#keywords\u0026#39;, function () { var q = $(this).val(), isDelay = q.length == 2, keyCode = window.event.keyCode, key = String.fromCharCode(keyCode); if (searchAjax) { searchAjax.abort(); } searchAjax = $.get(\u0026#39;/home/ResponseByRequest\u0026#39;, { q: key, isDelay: isDelay }, function (data) { searchResult.append(data + \u0026#39;\u0026lt;hr/\u0026gt;\u0026#39;); }) })
■网友
你需要的是函数式编程，根据输入事件和和返回事件来制定响应结果。建议学习下rxjs，这个如果太复杂的话，可以简单用lodash或自己写一个throttle的节流函数。


推荐阅读


上一篇：世界上有哪些逼格很高的产品设计和视觉设计

下一篇：目前的小贷公司风控是怎样做的，是否会考虑与风控数据服务商合作