Exécuter la fonction javascript après la fin de la précédente

Le moyen le plus simple de faire ce que vous voulez est de changer simplement le deuxième showElement en 4000 au lieu de 2000 .

De cette façon, l'un aura un délai d'expiration de 2 secondes et l'autre de 4 secondes.

Il existe de nombreuses approches différentes, mais je suggère d'utiliser une promesse comme celle-ci:

document.getElementById('btnSend').addEventListener('click', e => {
    e.preventDefault();
    var result = validateInputs(email, subject, message);
    if(result){
        showElement(document.getElementById('formGroupSpinner'), 2000).then(()=>{
            return showElement(document.getElementById('formGroupSuccessImg'), 2000);
        }).then(()=>{
            resetForm();
        });
    }
});

//expects an html element and a number representing miliseconds. Shows the html element for that amount of time.
function showElement(element, mSeconds) {
    return new Promise((resolve, reject) => {
        element.classList.remove('d-none');
        element.classList.add('d-block');
        setTimeout( () => {
            element.classList.remove('d-block');
            element.classList.add('d-none');
            resolve();
        }, mSeconds);
    });
}

En gros, la fonction après le .then () n'est exécutée qu'une fois que vous avez appelé le resolve();.

Vous pouvez également utiliser un callback ou un async / await .

Pour créer une chaîne de promesses, il faut d'abord avoir une promesse.

function showElement(element, mSeconds) {
  return new Promise(function(resolve,reject){
    element.classList.remove('d-none');
    element.classList.add('d-block');
    setTimeout( () => {
      element.classList.remove('d-block');
      element.classList.add('d-none');
      resolve();
    }, mSeconds);
  }
}

Ensuite, vous pouvez utiliser showElement (). then (/ * quelque chose ici * /)

vous pouvez utiliser un rappel pour exécuter d'autres instructions après la fin de la fonction:

//First you add a param "callback" to the function
function showElement(element, mSeconds, callback) {
    element.classList.remove('d-none');
    element.classList.add('d-block');
    setTimeout( () => {
        element.classList.remove('d-block');
        element.classList.add('d-none');
        //Then you ask if the callback function is present and call it
        if(callback && typeof callback === "function") callback();
    }, mSeconds);
}

//Then use it in your event like this:
document.getElementById('btnSend').addEventListener('click', e => {
    e.preventDefault();
    result = validateInputs(email, subject, message);
    if(result) {
        showElement(document.getElementById('formGroupSpinner'), 2000, () => {
            showElement(document.getElementById('formGroupSuccessImg'), 2000);
            resetForm();
        });  
    }
}); 

Vous pouvez le faire en utilisant Promesse . Vous devez envelopper votre fonction showElement () dans une promesse et appeler le résolveur de promesse une fois que setTimeout se déclenche. Ensuite, votre code d'appel peut canaliser vos promesses avec puis:

<button id="btnSend">Send</button>

<div id="formGroupSpinner" class="d-none">Spinner</div>
<div id="formGroupSuccessImg" class="d-none">Success image</div>

Cependant, cela conduit rapidement à l'enfer des rappels. P >

Vous pouvez éviter cela en utilisant asynchroniser / attendre . Vous marquez votre fonction comme async , puis vous pouvez utiliser await dedans pour attendre que les promesses se résolvent avant de passer à la suivante:

.d-none {
  display: none;
}

.d-block {
  display: block;
}

Voici une démo fonctionnelle:

document.getElementById('btnSend').addEventListener('click', async e => {
    e.preventDefault();
    await showElement(document.getElementById('formGroupSpinner'), 2000);
    await showElement(document.getElementById('formGroupSuccessImg'), 2000);
});

function showElement(element, mSeconds) {
  return new Promise((resolve, reject) => {
    element.classList.remove('d-none');
    element.classList.add('d-block');
    setTimeout(() => {
        element.classList.remove('d-block');
        element.classList.add('d-none');
        resolve();
    }, mSeconds);
  });
}

await showElement(document.getElementById('formGroupSpinner'), 2000);
await showElement(document.getElementById('formGroupSuccessImg'), 2000);
resetForm();

showElement(document.getElementById('formGroupSpinner'), 2000).then(() => {
    showElement(document.getElementById('formGroupSuccessImg'), 2000).then(() => {
        resetForm();
    });
});