如何使用JavaScript在onchange事件中等待诺言完成？

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

一种可能的方法是提供对change事件的回调。

 $('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

您想调用一个在菜单更改和按钮单击时都进行异步调用的函数。 有一个简单的解决方案，使函数读取菜单的值并返回promise，并在两个事件中使用它。

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
    });
});