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

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

mov al/ax/eax/rax, [qword absolute_address]

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

2 个答案: