Javascript – JQuery : Ajout d’un appel asynchrone à un évènement qui n’en a pas

Lors d’un appel d’un évènement qui n’exécute pas un appel asynchrone, l’évènement déclenché s’exécutera et se terminera et passera par la suite à la ligne suivante. C’est identique à l’exécution d’un instruction l’une à la suite de l’autre.

Vous pouvez le tester avec le code ci-dessous :

$('#div1').val("Texte");
$('#div1').trigger('change');
// Ce qui suit est exécuté après le changement effectué
$('#div2').val($("#div1").val());

Si vous avez besoin d’attendre que l’évènement « change » soit terminer avant d’exécuter la suite, il faut faire au « handler » de l’évènement et à la fonction « setTimeout » qui appelle une fonction après un certains temps.

Le code ci-dessous vous montre comment le faire :

$("#div1").change(function(e, c) {
  // Simulating ajax
  setTimeout(function() {
    alert("Exécuté en second");
    if (typeof callback === "function")
         callback();
  }, 3000);
  alert("Exécuté en premier");
});

$("#div1").trigger("change", function() {
  alert("Exécuté en troisième");
});