Il peut être intéressant d’ajouter un compteur de secondes devant un élément, par exemple lors d’un appel ajax Asynchronous javacript XML, devant un élément tel qu’un icone de chargement. Ainsi l’utilisateur aura une information sur le temps pris pour l’appel au serveur.
Pour cela, on définit un prototype de l’objet Element qui retourne l’identifiant de l’intervalle que l’on définit pour lancer la fonction de chronométrage. Ainsi, il sera plus simple de le supprimer :
|
1 2 3 4 5 6 7 8 9 10 11 |
Element.prototype.loaderCounter = function() { const span = document.createElement('span'); span.classList.add('counter'); this.insertAdjacentElement('beforebegin', span); span.innerHTML = '0 s'; const start = Date.now(); return setInterval(() => { span.innerHTML = Math.floor((Date.now()-start)/1000) + ' s'; }, 1000); }; |
Pour lancer le compteur devant un élément, on appelle la méthode loaderCounter() ainsi :
|
1 2 |
const el = document.getElementById('monId'); const interval = el.loadCounter(); |
On définit la méthode removeLoaderCounter(), en prenant comme argument l’identifiant de l’intervalle retourné par la méthode loadCounter() :
|
1 2 3 4 |
Element.prototype.removeLoaderCounter = function(interval) { clearInterval(interval); this.previousSibling.remove(); }; |
Ainsi, lors d’un appel à l’API XMLHttpRequest (XHR), on peut écrire :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const formData = new FormData(myForm); const searchContainer = document.getElementById('search-loader-container'); const loader = document.createElement('div'); loader.id = 'my-id-for-loader'; searchContainer.append(loader); var intervalLoader = loader.loaderCounter(); const xhr = new XMLHttpRequest(); xhr.open('POST', ajaxurl); xhr.send(formData); xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { loader.removeLoaderCounter(intervalLoader); loader.remove(); const json = JSON.parse(xhr.response); ... // Process after response } } |
Et hop, un compteur simple pour les appels AJAX.
