javascript - 如何检测 jQuery 触发事件完成？

Question

我正在尝试触发依赖于第一个事件的第二个事件，如下所示：

...
$('#productFamilyId').val(data.contents.productfamily);
$('#productFamilyId').trigger('change', function() {
    $('#productId').val(data.contents.product);
    $('#productId').trigger('change');
});

在尝试触发第二个事件之前，它不会等待第一个触发器完成。是否可以等待第一个触发器完成？

Answer 1

可能你想要这个：

$('#productFamilyId').trigger('change', function() {
   $('#productId').val(data.contents.product);
   setTimeout(function(){ 
      $('#productId').trigger('change'); 
   },1);
});

Answer 2

您可以使用 javascripts setTimeout() 函数，以便该函数将在一段时间后执行。

$('#productFamilyId').val(data.contents.productfamily);
$('#productFamilyId').trigger('change', function() {
setTimeout( function(){       
$('#productId').val(data.contents.product);
    $('#productId').trigger('change');
},100);
});

Answer 3

如果您的事件处理程序不执行异步调用，则触发的事件将执行并完成，然后才会转到下一行。提琴手

$('#productFamilyId').val(data.contents.productfamily);
$('#productFamilyId').trigger('change');
// Execute after change complete
$('#productId').val(data.contents.product);
$('#productId').trigger('change');

通过事件处理程序中的异步调用（setTimeOut、Ajax 等），您可以执行以下操作：JsFiddle

在事件处理程序中添加回调函数作为参数：

$("#productFamilyId").change(function(e, callback) {
    // Simulating ajax
    setTimeout(function() {
        if (typeof callback === "function")
            callback();
    }, 3000);
});

并像这样触发：

$('#productFamilyId').trigger('change', function() {
    $('#productId').val(data.contents.product);
    $('#productId').trigger('change');
});

Answer 4

触发方法没有回调。额外的参数就是 - 参数。

http://api.jquery.com/trigger/

您实际上正在做的是在第二个函数中运行代码，然后将结果作为参数传递给触发器调用的事件处理程序。如果您希望它们按顺序运行，则需要在第一个事件的事件处理程序中触发第二个事件。