Ajax 多次异步请求分析

现象

鼠标滑过列表发出请求，在页面上显示请求结果。鼠标一次性滑过多个列表项，发出多个请求，请求返回结果有时间查导致页面显示出现闪烁。

影响

页面显示闪烁，视觉显示不好看，交互不友好

解决方法

• 取消之前的请求响应

  在ajax请求未响应之前可以使用 xhr.abort() 取消，但如果发出的请求已经到达了服务器，这种终止只是让浏览器不在监听这个请求的响应，服务器端仍然会进行处理。使用 abort() 取消后会进入 error 回调函数

  // 定义请求对象
  var getCategoryInfoAjax = null;
  function getCategoryInfo() {
      if (getCategoryInfoAjax) {
          // 不为 null 说明之前请求过，需要取消请求
          getCategoryInfoAjax.abort();
      }
      getCategoryInfoAjax = $.ajax({
          type: "POST",
          contentType: "application/x-www-form-urlencoded;charset=utf-8",
          url: url,
          data: param,
          success: function (result, testStatus) {
              // 也可以在这里判断 ajax 请求是否存在来决定是否执行回调函数
          },
          complete: function (xhr, xs) {
              xhr = null;
          },
          error: function (xmlHttpRequest, textStatus, errorThrown) {
              if (xmlHttpRequest.statusText === 'abort') {
                  // 说明是主动中断，不作出提示
              } else {
                  layer.msg('失败');
              }
          }
      });
  
  }
  

  缺点：使用封装好的 ajax 方法，如果出现需要多个请求同时进行的情况，那么使用 abort() 取消请求会使其他请求终止。

  优点：重复多次请求的情况下，我们可以抛弃之前所有的请求响应，获得最后一次的请求响应。

• 忽略之前的所有请求，保留最新一次的请求

  创建计数器，利用闭包技术来判断是否当前的ajax请求与响应返回是同一批次的。

  // 定义计数器
  var xhrCount = 0;
  function getCategoryInfo() {
      var seqNum = ++xhrCount;
      getCategoryInfoAjax = $.ajax({
          type: "POST",
          contentType: "application/x-www-form-urlencoded;charset=utf-8",
          url: url,
          data: param,
          success: function (result, testStatus) {
              if (seqNum === xhrCount) {
                  // 请求和响应属于同一批次的
              } else {
                  // 不相等说明请求和响应不是同一批次
              }
          },
          complete: function (xhr, xs) {
              xhr = null;
          },
          error: function (xmlHttpRequest, textStatus, errorThrown) {
              layer.msg('失败');
          }
      });
  
  }