title: How to wait for promises to complete within the onchange event using JavaScript?
body: <p>I have a need to manually trigger the <code>change</code> event on a menu. But then I need to wait until <code>change</code> event complete execution then I would perform action.</p>
  
  <p>Here is what I am trying to do in code</p>
  
  <pre><code>$('#menu').change(function(){
  
    // do some work
    // make multiple AJAX calls....
  
  });
  
  $('#button').click(function(){
  
     $('#menu').val(5).change(); // once change is completed I want to do some logic here.
  });
  </code></pre>
  
  <p>This is what I tried but is does not seem to wait for the <code>change()</code> event to finish.</p>
  
  <pre><code>$('#button').click(function(){
  
     $('#menu').val(5).change().promise().done(function(){
        // do some work after the change() event is completed..
     });
  });
  </code></pre>
  
  <p>How can I correctly perform code until after the change event is completed?</p>
  
  <p><strong>UPDATED</strong></p>
  
  <p>I tried the following, but still it does not seems to be working</p>
  
  <pre><code>$('#menu').change(function(){
  
       makeAjaxCalls($(this).val());
  
  });
  
  
  $('#button').click(function(){
  
     makeAjaxCalls(5, function(){
        // do some work after the makeAjaxCalls() is completed..
     });
  });
  
  function makeAjaxCalls(id, callback) {
      var task = $.Deferred(function(){
           // Make all ajax calls here...
      });
  
      $.when(task).then(function() {
          if ($.isFunction(callback)) {
              callback();
          }
      }).catch(function (error) {
          console.log('something wrong... ', error);
      });
  }
  </code></pre>