jQuery 초기 해결 지연

Question

jQuery 지연을 사용하는 데 어려움을 겪고 있습니다.

나는 그러나 각 함수가 반환, 아래에 규정 된 패턴을 사용하여, 함께 체인에 jQuery를 .then 문에 $.ajax 통화를 기능 통화의 숫자를 시도하고 (그래서 다음 계속하는 것은 체인) 아약스 호출이 해결되기 전에 .

function getCurrentYearAbsenceRequestData() { 
var dfd = $.Deferred(); 

    var today = moment(); 
    var startOfCurrentHolidayYear = moment($clnt.holidayYearStartDate, "DD MMMM").format("DD/MM/YYYY"); 
    var startDayOfCurrentHolidayYear = moment().dayOfYear(startOfCurrentHolidayYear) 
    var currentDayOfYear = moment().dayOfYear(); 

    if (moment(today).isBefore(startOfCurrentHolidayYear)) { //checks if holiday year started last year 
     startOfCurrentHolidayYear = moment(startOfCurrentHolidayYear).subtract(1, "years"); //if so subtract 1 year from start of currently holiday year date 
    }; 

    console.log("Start of Holiday year is " + startOfCurrentHolidayYear); 

    var getOrgDataQuery = $apiUrl + "/web/lists/getbytitle('AbsenceRequests')/Items?$select=Id,AssocBranch/Title,DateFrom,DateTo,EmployeeLookup/EmployeeName,EmployeeLookup/Id,AbsenceType/AbsenceTypeShort,ReviewOutcome,TotalDays,AbsenceNotes&$expand=AssocBranch/Title,EmployeeLookup/EmployeeName,AbsenceType/AbsenceTypeShort&$filter=DateFrom ge '" + startOfCurrentHolidayYear + "'"; 

     $.ajax(_cnxRest.getRequest(getOrgDataQuery)) //calls personal library function which formats the parameter - this works OK) 
      .done(function (r) { 
       console.log("Get Org data success" + r); 
       var $absDataCurrentYearData = r.d.results; 
       $absData.allCurrentYear = $absDataCurrentYearData; 

      dfd.resolve(); 
      }) 
     .fail(function (err) { 
      logError(err); 
     }); 
    }; 

    return dfd.promise(); 

}; 

난 이후 그 때는 함수가 진행되기 전에 해결하기 위해 $ 아약스 전화를 걸려과 장소에 관한 몇 가지 지능적인 조언을 기쁘게받을 것이다 : 위라는

// earlier code runs fine to here 
}) 
.then(function (r) { 
    getCurrentYearAbsenceRequestData(); // calls function which contains a $.ajax request 
}) 
.then(function (r) { 
    restructureCurrentYearAbsenceData(); 
}); 

// further processing of results 

기능이 패턴을 따른다 나는 잘못 가고있다.

Answer 1

비동기 함수는 호출자에게 비동기를 알리기 위해 약속을 반환해야합니다. 그렇지 않으면 호출자의 .then(...).then(...) 연쇄가 비동기와 관련없이 계속 진행됩니다. 이는 비동기 문제에 대해 설명 된 증상입니다.

약간의 수익이 누락되었지만 코드가 다소 정돈 될 수도 있습니다.

// earlier code runs fine to here 
.then(function (r) { 
    return getCurrentYearAbsenceRequestData(); 
// ^^^^^^ 
}) 
.then(function (r) { 
    return restructureCurrentYearAbsenceData(); 
// ^^^^^^ 
}) 
.fail(function (err) { 
    logError(err); // by logging here you will see reported errors arising from the entire chain. 
}); 

function getCurrentYearAbsenceRequestData() { 
    var startOfCurrentHolidayYear = moment($clnt.holidayYearStartDate, "DD MMMM").format("DD/MM/YYYY"); 
    if(moment(moment()).isBefore(startOfCurrentHolidayYear)) { 
     startOfCurrentHolidayYear = moment(startOfCurrentHolidayYear).subtract(1, "years"); 
    }; 
    var getOrgDataQuery = $apiUrl + "/web/lists/getbytitle('AbsenceRequests')/Items?$select=Id,AssocBranch/Title,DateFrom,DateTo,EmployeeLookup/EmployeeName,EmployeeLookup/Id,AbsenceType/AbsenceTypeShort,ReviewOutcome,TotalDays,AbsenceNotes&$expand=AssocBranch/Title,EmployeeLookup/EmployeeName,AbsenceType/AbsenceTypeShort&$filter=DateFrom ge '" + startOfCurrentHolidayYear + "'"; 
    return $.ajax(_cnxRest.getRequest(getOrgDataQuery)) 
// ^^^^^^ 
    .then(function(r) { 
     $absData.allCurrentYear = r.d.results; 
     retrun r; // make the result available to the next step in the caller's .then chain, even if it's not going to be used 
//  ^^^^^^ 
    }); 
}; 

주쇄

이 단순화 될 수있다 : 여기

.then(getCurrentYearAbsenceRequestData) // calls function which contains a $.ajax request 
.then(restructureCurrentYearAbsenceData) 
.fail(function(err) { 
    logError(err); 
}); 

상기 retruns 그 지정된 기능 내에 기록된다.