如何检测一个jQuery的触发事件完成？

Question

我试图触发依赖于第一第二个事件，像这样：

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

这不是等待第一个触发试图触发第二事件之前完成。是否有可能等待第一个触发器完成？

Answer 1

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

​​

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

Answer 2

也许你想这样的：

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

Answer 3

可以使用的JavaScript的setTimeout（）函数，因此该函数将一些间隔后执行。

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

Answer 4

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

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

使用异步调用在事件处理程序（setTimeout的，阿贾克斯等），你可以这样做：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'); 
});