title: How to execute a function only after a variable has been modified - Javascript and ajax
body: <p>I have two ajax calls in my javascript code. I have an array 'a' defined globally, which is modified by one of the ajax calls in 'success'. In the second ajax call's 'success', I want to make use of the updated array 'a', along with the data that i received from the second ajax call. It looks something like this : </p>
  
  <pre><code>var a = [];
  x();
  y();
  
  
  function x(){
      //ajax call 1 - updates the array 'a' in its 'success'. Done async!
  
  }
  function y(){
          filters = []   //some filter
          $.ajax({
                  type : 'POST',
                  url : "get-other-data",
                  dataType : 'json',
                  async: "true",
                  data:JSON.stringify(filters),
                  contentType: 'application/json; charset=utf-8',
                  success : function(data){
  
                      while(a.length == 0);
                      z(a,data);           // Want this to execute only after 'a' has been updated
  
  
                  },
                  failure: function(data){
                      alert('got an error');
                  }
              });
  
  }
  function z(a,data){
    //does something
  }
  
  </code></pre>
  
  <p>I tried doing the above in the second ajax call, but it runs into an infinite loop. I've confirmed that the first ajax call works perfectly. So, does this mean that it creates a copy of the global variable and doesn't update it even if other functions make an update? What changes do I do to make it work?</p>
  
  <p>Thanks a lot in advance!</p>