0

我一次发送几个ajax请求。但如您所知，结果到达时间与您发送请求的时间无关。现在，这对我来说是个问题。

这就是我现在所面对的。

当我单击使用 HTMLElement 制作的 TAB 按钮时，它会发送 ajax 调用。

如果我在单击其他选项卡后单击该选项卡。两个请求一起出现，我不知道哪个可以先回复我。但不幸的是，最后一个有时比第一个 ajax 请求更早到达。

然后，我的 html 标记出现混乱，所以我的问题是有什么方法可以让 ajax 调用按常规顺序到达。

initialize : function() { //<!-- this function call AJAX request
    this.getActivatedDeviceList();
    this.getDeActivatedDeviceList();
    this.getLostOrStolenDeviceList();
    this.getWaitingDeviceList();
},

getActivatedDeviceList : function() {
    var url = "/monitor/device/getActivatedDeviceJson/" + TopMenu.CURRENT_TAB + "/";
    this.loadTemplateAndFillUp(url, "#activatedDeviceTemplate", "#activatedDevice");
},

getDeActivatedDeviceList : function() {
    var url = "/monitor/device/getDeactivatedDeviceJson/" + TopMenu.CURRENT_TAB + "/";
    this.loadTemplateAndFillUp(url, "#deactivatedDeviceTemplate", "#deactivatedDevice");
},

getLostOrStolenDeviceList : function() {
    var url = "/monitor/device/getLostOrStolenDeviceJson/" + TopMenu.CURRENT_TAB + "/";
    this.loadTemplateAndFillUp(url, "#lostOrStolenDeviceTemplate", "#lostOrStolenDevice");
},

getWaitingDeviceList : function() {
    var url = "/monitor/device/getWaitingDeviceJson/" + TopMenu.CURRENT_TAB + "/";
    this.loadTemplateAndFillUp(url, "#waitingDeviceTemplate", "#waitingDevice");
},

loadTemplateAndFillUp : function(url, templateElement, appendElement) {
    $.ajax({ //<!--This ajax call fires upon initialize function
          url : url,
          dataType : 'json',
          beforeSend : function(xhr) {
              $(appendElement).children(".zoom").attr("src", "/monitor/img/icon/loading.gif");
          },
          complete : function(xhr) {
              setTimeout(
                  function() {
                      $(appendElement).children(".zoom").attr("src", "/monitor/img/btn/btn_zoom.png")
                  }, 
                  500
              );

              $(appendElement).find("table.dataBoxTable").tableScroll({height:DeviceManager.TABLE_HEIGHT});
              DeviceManager.columnAutoFit(appendElement);
              DeviceManager.addListenerAndHandler();
          },
          success : function(data) {
              $(templateElement).tmpl(data).appendTo(appendElement); //<!--This jquery template get messed up by ajax arrival order.
          },
          async: true
    });
},

我希望你能听懂我的英语。非常感谢您。

4

1 回答 1

1

客户端： 在客户端有一个计数器，即 ajaxCounter = 0; 并在 ajax 调用中增加计数器，然后将计数器作为参数发送给调用。

现在由于进行了两次调用，因此 ajaxCounter 为 2

服务器端： 始终返回作为参数接收的 ajaxCounter。因此，对于第一个 ajax 调用，返回的将是 1。所以对于第二个 ajax 调用，返回的将是 2。

客户端： 在客户端检查ajaxCounter == counterReturnedFromClient是否。如果相等，则执行完整方法，否则忽略。

于 2012-05-17T13:25:34.007 回答