Set time interval on actions JS (Await, setTimeout Or setinterval )

Question

We have more than 30 inputs in our HTML file, (name,adresse,phone....) on diferent pages

the script in the chrome extension autocomplete all inputs one after one, in one time,

My question is how to make a function whait for the action beforr. set the value of each input one after one but with interval of 500ms.

function setById(id,valeur ){
    setTimeout(()=>{
        var ev = new Event('input');
        if (document.getElementById(id)) {
        Elem = document.getElementById(id) ? document.getElementById(id) : null
        Elem.value =valeur;
        Elem.dispatchEvent(ev);


    }else{
        console.log('L"element ' + id  + ' introuvable, pour valeur ==> '+ valeur);
    }
    },500);
}


///////////////////////////////////////
// immatriculation 
const immatriculation = setById('immatriculation',matricule.replaceAll('-',''));
// codePostalGarage
const codePostalGarage = setById('codePostalGarage',setData__.station_cp_n);

// villeGarage
const villeGarage = setById('villeGarage',setData__.station_ville_n);

Thank you Codeurs,

Answer 1

Try something like this

 // dummy data const matricule = "xxx" const setData__ = { station_cp_n: "x", station_ville_n: "y" } // object from your statements const values = [ { 'immatriculation': matricule.replaceAll('-', '') }, { 'codePostalGarage': setData__.station_cp_n }, { 'villeGarage': setData__.station_ville_n } ]; cnt = 0; const setById = () => { const ev = new Event('input'); const [id, valeur] = Object.entries(values[cnt])[0]; // destruct the element if (document.getElementById(id)) { Elem = document.getElementById(id)? document.getElementById(id): null Elem.value = valeur; Elem.dispatchEvent(ev); } else { console.log('L´element ' + id + ' introuvable, pour valeur ==> ' + valeur); } cnt++; if (cnt < values.length) setTimeout(setById, 500); // stop if finished } setById(); // start it