如何檢測一個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'); 
});