ajax 비동기 솔루션

한 번에 여러 개의 아약스 요청을 보냅니다. 하지만 결과 도착 시간은 요청한 시간과 관련이 없습니다. 이제 이것이 내게 문제가됩니다.ajax 비동기 솔루션

내가 지금 직면 한 것은 다음과 같습니다.

HTMLElement로 만든 Tab 버튼을 클릭하면 ajax 호출이 전송됩니다.

다른 탭을 클릭 한 직후에 탭을 클릭하면 두 가지 요청이 함께 이루어지며 어느 것이 먼저 저에게 응답 할 수 있는지 알 수 없습니다. 하지만 불행히도 마지막 애칭은 첫 번째 아약스 요청보다 일찍 도착합니다.

그런 다음 내 HTML 마크 업이 터지기 쉽습니다. 제 질문은 아약스 호출을 정기적으로 수신하는 방법입니다.

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 
    }); 
},

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

난 당신이 내 영어를 이해할 수 있기를 바랍니다. 고마워요.

출처

2012-05-17 Patrick Jeon

이미지를로드 할 수 없으므로 async : false를 사용하고 싶지 않습니다. –

시도해보십시오. http://stackoverflow.com/questions/446594/kill-ajax-requests-using-javascript- using-jquery 마지막 요청을 죽이고 다시 ajax를 호출 – sathish

클라이언트 측 : 클라이언트 측에 카운터가 있어야합니다 (예 : ajaxCounter = 0; 그리고 ajax 호출에서 카운터를 증가시킨 다음 카운터를 매개 변수로 호출에 보냅니다. 는 항상 ajaxCounter가 매개 변수로받은 반환 :

지금 만든 두 호출이 있기 때문에 다음 ajaxCounter 2

서버 측이다. 그래서 첫번째 Ajax 호출을위한 것입니다 반환 1 따라서 2 아약스 호출에 대한 2

클라이언트 측 될 것입니다 반환 : 클라이언트 측 검사에서 ajaxCounter == counterReturnedFromClient 여부. 동일하면 완전 메소드를 실행하고 그렇지 않으면 무시하십시오.

출처

2012-05-17 13:25:34 dhinesh

감사합니다! 대신 카운터를 사용하여 마지막 아약스 호출을 식별하기 위해 ID 생성을 사용했습니다. –

ajax 비동기 솔루션

답변

관련 문제