Как ждать выполнения обещаний в рамках события onchange с использованием JavaScript?

Question

Мне нужно вручную вызвать событие change в меню.Но тогда мне нужно подождать, пока change событие не завершится, тогда я выполню действие.

Вот что я пытаюсь сделать в коде

$('#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.
});

Это то, что я пытался, нопохоже, что он не ожидает завершения события change().

$('#button').click(function(){

   $('#menu').val(5).change().promise().done(function(){
      // do some work after the change() event is completed..
   });
});

Как правильно выполнить код до завершения события изменения?

ОБНОВЛЕНО

Я попробовал следующее, но, похоже, не работает

$('#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);
    });
}

Answer 1

Один из возможных способов сделать это - предоставить обратный вызов событию изменения.

$('select').on('change', function(e, data){
  //mimic an async action
  setTimeout(function(){
    console.log('element changed');
    
    //if extra data was given, and one of them is a callback, use it
    if (data && typeof data.callback === 'function') {
      data.callback();
    }
  }, 2000);
});

$('button').on('click', function(){
  //trigger the change with extra data containing a callback
  $('select').val(2).trigger('change', { callback: function(){ console.log( 'weeee' ); } });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<button>Click Me</button>

Answer 2

Вы хотите вызвать функцию, которая выполняет асинхронные вызовы как при изменении меню, так и при нажатии кнопки.Для этого есть простое решение: создайте функцию, которая считывает значение меню и возвращает обещание и использует его в обоих событиях.

function makeAjaxCalls() {
    var menuValue = $('#menu').val();
    // Run some ajax calls based on menuValue and return the promise
    return Promise.resolve()
}

$('#menu').change(makeAjaxCalls);
$('#button').click(function(){
    $('#menu').val(5);
    makeAjaxCalls().then(function() {
        // Do something after ajax calls completed
    });
});