Question

I have problem with two functions. I want chcekResults run only when callAPI is finished.

My click event:

$("a#showA").click(function (e) {
    e.preventDefault();
    chceckResults(callAPI(apiKey));
});

and functions:

var Count = 0;
var ContractsArray = new Array();


function callAPI(yourAPIKey){
var enquiry = URL + yourAPIKey;
//alert(enquiry);
$.ajax({
 url: enquiry,
 type: 'GET',
 dataType: "jsonp",
 jsonp: "callback",
 jsonpCallback: "jsonpCallback2",
 complete: function (response, responseCode) {
 },
 success: function (json) {
     $.each(json.Contracts, function (index, contract) {
        // alert("Count before increament : " + Count);
        // alert(contract.ContractCode);
         ContractsArray[Count] = contract.ContractCode;

        // alert("Count after increament : " + Count);
        // alert("ContractsArray[Count]: " + ContractsArray[Count]);
         Count++;

        });
    }
 });
}

function chceckResults(){
alert("Count value in chceckResults : " + Count);
  for(var i = 0; i <= Count; i++){
    alert("ContractsArray[" + i + "]: " + ContractsArray[i]);
  }
}

I want chcekResults run only when callAPI is finished. How can I do that?

Answer 1

You want chcekResults run after callAPI is finished, there’s several possibilities, it’s run after callAPI is successful (I guess this is what you really wanted), or callAPI failed, or both.

Since callAPI is making an ajax call, so you can put chcekResults in the success callback of the ajax.

Such that:

$.ajax({
  url: enquiry,
  type: 'GET',
  dataType: "jsonp",
  jsonp: "callback",
  jsonpCallback: "jsonpCallback2",
  complete: function (response, responseCode) {
  },
  success: function (json) {
  $.each(json.Contracts, function (index, contract) {
    // alert("Count before increament : " + Count);
    // alert(contract.ContractCode);
    ContractsArray[Count] = contract.ContractCode;

    // alert("Count after increament : " + Count);
    // alert("ContractsArray[Count]: " + ContractsArray[Count]);
    Count++;
   });
   // --------------------- Edit Begins -------------------------
   chcekResults(...);   // This is run after ajax response returns.
   // --------------------- Edit Ends -------------------------
  }
});

This is the quick way of doing it, if you want to make it more generic, you could pass the chcekResults as a callback to the ajax, so that if this callback is defined, run it, if not, ignore. This way, you can use this ajax with or without callback.