title: Execute function on completion of another, use ajaxComplete()?
body: <p>Two functions need to execute in Javascript, and one should start when another has finished.</p>
  
  <p>The first populates an array with <code>getJSON</code>, and the second will then manipulate it.</p>
  
  <p>However, <code>getJSON</code> is asynchronous and it will not pause the order of execution to make the program work properly so that the array finishes loading before the second function can execute. </p>
  
  <p>How can one use Jquery's <code>ajaxComplete()</code> or else the <code>getJSON</code> callback to run the second function once the data has finished loading via <code>getJSON</code>.</p>
  
  <p>Thanks.</p>
  
  <hr>
  
  <p>here is the code:</p>
  
  <pre><code>function fetch_ids(user) {
    var url = 'http://test.com/ids/' + escape(user) + '.json?callback=?';
    // populate array ids[] with JSON data --uid[] array declared globally
    $.getJSON(url, function(data) {
      for (var i = 0; i &lt; data.length; i++) ids[i] = data[i];
    });
    // test array and run alert
    for (i = 0; i &lt; uid.length; i++) {
      for (j = 0; j &lt; ids.length; j++) {
        if (uid[i] == ids[j]) {
          alert('matched: ' + uid[i]);
        }
      }
    }
    // finish test
  }
  </code></pre>