jQuery ajax 호출 후 콜백 함수

Question

jQuery 아약스 호출을 REST 끝점으로 만드는 함수가 있습니다. 이 기능은 유효성을 검사 할 데이터를 수집하기 위해 다른 엔드 포인트로 5-6 회 실행됩니다. 이 시간 동안 브라우저 화면에 스피너를 표시하여 최종 사용자에게 프로그램이 처리 중임을 알려줍니다. 한 번 완료되면 회 전자를 숨기고 싶습니다. 나는 이것을 어떻게 작동시키는지를 고민하고있다. 내 생각은 간단한 콜백 함수가 될 것이다. 나는 click 메서드와 css 메서드뿐만 아니라 ajax 호출 (validateAcctStr)에 콜백 함수를 넣으려고 시도했지만 이들 중 아무 것도 작동하지 않는 것 같습니다. 내가 누락 된 단순한 무언가가있는 것 같아?

$(document).ready(function(){ 
$("#submit").click(function(disableSpinner){ 
    $("#json-overlay").css("display", "block"); 
    validateAcctStr("ValidationAccount", "#accountTxt", "#acctValid"); 
    validateAcctStr("ValidationBusiness", "#businessTxt", "#busValid"); 
}); 
    function disableSpinner(){ 
     $("#json-overlay").css("display", "none"); 
     alert("test"); 
    } 
}); 

이

은 (는 SharePoint 목록에서 데이터를 가져옵니다) 내가 지금까지 내 아약스 호출이 무엇 :

function validateAcctStr(list, inputField, validationField) 
{ 
$.ajax({ 
    url: "https://urlAddress/_api/web/lists/getbytitle('"+list+"')/items?$orderby=Title asc&$top=4999", 
    type: "GET", 
    dataType: "json", 
    headers: { 
     Accept: "application/json;odata=verbose" 
    }, 
success: function(data){ 
    $.each(data.d.results, function(index, item){ 
      var arrayVar = $(inputField).val(); 
      if(item.Title === arrayVar){ 
       $(validationField).html("Valid").css({"background-color": "green", "color": "white", "text-align": "center"});     
       return false; 
      } else { 
       $(validationField).html("Invalid").css({"background-color": "red", "color": "white", "text-align": "center"}); 
      } 
     }); 
    } 
}); 
} 

Answer 1

당신은 그냥 일을 넣어야 할 장소의 거의 모든 부분이 올바른 순서.

disableSpinner 함수를 호출하지 않는 것이 문제입니다.

몇 가지 다른 작은 것들이 있으므로 코드를 변경하는 방법을 보여 드리겠습니다.

그래서 $ (문서) .ready() 직원의 의지가되었다 :

$(document).ready(function(){ 
    $("#submit").click(function(ev){ 
     activeSpinner(); 
     validateAcctStr("ValidationAccount", "#accountTxt", "#acctValid"); 
     validateAcctStr("ValidationBusiness", "#businessTxt", "#busValid"); 
    }); 
}); 

당신은 다른이있을 때 자바 스크립트 코드 :

// You worked well wrapping the code to disable the spinner in a function 
// let's do it for the activation too. 
function activeSpinner() { 
    $("#json-overlay").css("display", "block"); 
} 

function disableSpinner() { 
    $("#json-overlay").css("display", "none"); 
    // this is just for test: 
    // alert("test"); 
} 

그리고 아약스 전화 :

function validateAcctStr(list, inputField, validationField) { 
$.ajax({ 
    url: "https://urlAddress/_api/web/lists/getbytitle('"+list+"')/items?$orderby=Title asc&$top=4999", 
    type: "GET", 
    dataType: "json", 
    headers: { 
     Accept: "application/json;odata=verbose" 
    }, 
success: function(data){ 
    disableSpinner(); // As the first task you have to disable the spinner. 
    $.each(data.d.results, function(index, item){ 
      var arrayVar = $(inputField).val(); 
      if(item.Title === arrayVar){ 
       $(validationField).html("Valid").css({"background-color": "green", "color": "white", "text-align": "center"});     
       return false; 
      } else { 
       $(validationField).html("Invalid").css({"background-color": "red", "color": "white", "text-align": "center"}); 
      } 
     }); 
    }, 
error: function(err) { 
    disableSpinner(); // to avoid spinner active on an error 
    // do something with the error. 
} 
}); 
} 

업데이트

콜백 목록이 완료 될 때까지 기다릴 필요가있는 경우 다소 복잡한 접근 방식을 사용해야합니다.

약속을 발표 할 수는 있지만 거의 모든 코드를 다시 작성해야합니다.

function callbackCounter() { 
    var count = 0; 
    return { 
     set: function (n) { 
      count = n; 
     }, 
     incr: function() { 
      cont++; 
     }, 
     done: function() { 
      count--; 
     }, 
     doneAll: function() { 
      count = 0; 
     }, 
     isDone: function() { 
      return count === 0; 
     } 
    } 
} 

// ... 
$("#submit").click(function(ev){ 
    activeSpinner(); 
    var countCallbacks = callbackCounter(); 
    countCallbacks.set(2); 
    validateAcctStr("ValidationAccount", "#accountTxt", "#acctValid", countCallbacks); 
    validateAcctStr("ValidationBusiness", "#businessTxt", "#busValid", countCallbacks); 
}); 

function validateAcctStr(list, inputField, validationField, countCallbacks) { 

// snipp... 
success: function(data){ 
    // here you decrement the callbacks: 
    countCallbacks.done(); 
    if (countCallbacks.isDone()) disableSpinner(); // As the first task you have to disable the spinner. 
}, 

오류 처리기에서 동일한 코드 : 귀하의 경우에는 콜백을 사용해야합니다.