Ajax 호출이 완료되도록 올바른 간격으로 설정하고 있습니까?

Question

두 개의 입력 텍스트 필드와 하나의 "저장"버튼이 있습니다.

<input type="text" id="myInput" /> 
<input type="text" id="searchResult"/> 
<button id="myButton>save</button> 

myInput 텍스트 필드는 일부 데이터를 얻을 searchResult 텍스트 필드에 결과를 표시하는 Ajax 요청을 전송 onchange를 이벤트 있습니다.

저장 버튼에는 빈 문자열 등의 입력란을 확인하는 클릭 이벤트이 있습니다 (). ok이면 저장을 계속합니다.

1. onchange event

   가 트리거

   다음 사용자가 텍스트 필드에 텍스트의 유형과는 save" 버튼 "을 클릭, 문제는, callAjaxToGetData()가 호출

   $("myInput").change(function() { 
       var userInput = $("myInput").val(); //get value from the text field 
       var responseText = callAjaxToGetData(userInput): //XHR request to get some data 
   
       $("searchResult").val(responseText); //show the XHR result here 
   
   }); 
   
   
   $("myButton").click(function() { 
       var searchResultField = $("searchResult").val(); //get value from the searchResult field 
       var isOK = validate(searchResultField); //check empty string and such 
   
       if(isOK) { saveDataViaAjax(userInput); } 
   }); 
   

   . (XHR)

2. 보다 앞에 callAjaxToGetData()이있다. 검색 결과 텍스트 필드를 작성하고 입력하면 myButton onclick event이 트리거됩니다.

3. onclick 이벤트 처리기 측에서는 searchResult 필드가 여전히 비어있어 유효성 검사가 실패합니다.

4. callAjaxToGetData() 마지막으로 searchResult 텍스트 필드를 완료하고 채 웁니다. 검증이 실패되지 않도록 이상적 callAjaxToGetData()가 먼저 완료된

는 온 클릭 이벤트의 내부 프로세스를 진행.

사람들이이 문제에 어떻게 대처하는지 궁금하네요.

내가

$("myButton").click(function() { 

    var interval = setInterval(function() { //call every 500ms 

     //if responseText is not null that means i know the ajax inside of onchange event is completed for sure. 
     if(responseText != null) { 

      clearInterval(interval); 

      var searchResultField = $("searchResult").val(); //get value from the searchResult field 
      var isOK = validate(searchResultField); //check empty string and such 

      if(isOK) { saveDataViaAjax(userInput); } 
     } 
    }, 500); 
}); 

Answer 1

코드 아래 정확하지 않을 수 있습니다 (이것은 전역 변수로에서 responseText 필요) 아래와 같이 온 클릭 이벤트에 간격을 넣어 생각하고하지만 아약스 전에 버튼을 비활성화 한 후 활성화 것 콜백이 반환됩니다.

$("myInput").change(function() { 
    $("myButton").attr("disabled", "disabled"); 
    var userInput = $("myInput").val(); //get value from the text field 
    var responseText = callAjaxToGetData(userInput, function(data) { 

     $("searchResult").val(data); //show the XHR result here 
     $("myButton").removeAttr("disabled"); 
    }): 
}); 

Answer 2

나는 타이머가 문제를 해결 설정, onClick event 과정 onChange event에서 아약스 과정보다 더 빨리 이동을 방지하기 위해 생각한다.

먼저 액티브 아약스 연결을 확인하고 달리 onClick 이벤트에서 호출되는 함수를 호출하는 도우미 함수를 만들었습니다.

도우미

function check_pending_process(callback) { 
    var interval = setInterval(function() { 
     if($.active > 0) { 
      //do nothing here 
     } 
     else { 
      //no ajax is running, call the function after 500 ms 
      clearInterval(interval); 
      setTimeout(function() { window[callback].call() }, 500); 
     }  
    }, 100); 
} 

발신자

function processButtonClick() { 
    var searchResultField = $("searchResult").val(); //get value from the searchResult field 
    var isOK = validate(searchResultField); //check empty string and such 

    if(isOK) { saveDataViaAjax(userInput); } 

} 

$("#myButton").click(function() { 

    check_pending_process("processButtonClick"); 

}); 

은 500 밀리 판단 onchange를 이벤트에서 후 아약스의 과정이 걸리는 시간을 기준으로합니다. 필자의 경우, onchange 이벤트 내 post-ajax 프로세스는 응답 텍스트를 텍스트 필드에 넣기 만하면 500ms 정도로 충분합니다.