UNE PAUSE DANS L'éXéCUTION DES SCRIPTS

illus

script : delay v1.0
langage : javascript
catégorie : fragment
usage : Une implémentation de delay en javascript, pour suspendre l'exécution des scripts.
tags : effets spéciaux - technique

Concept

De nombreuses personnes sur internet se posent la question du delay en javascript, ou comment suspendre l'exécution d'un script. Il y a bien sûr la fonction native setTimeout. Mais si cette fonction reporte l'exécution d'une fonction, elle n'empèche pas en revanche le déroulement du reste du code.
Le bout de code proposé ici vise à suspendre l'exécution de tout le code javascript de la page.

Usage

delay est très simple à utiliser : il suffit d'appeler la fonction, en indiquant la durée de suspension, en millisecondes

unTrucAFaireAvant();
 
delay( 1000 ); // pour une pause d'une seconde
 
unTrucAFaireApres();

Précautions

Quand vous utiliserz delay, ne perdez jamais de vue que l'exécution du javascript suspend l'affichage d'une page web. Aussi, si vous faite un delay d'une seconde avant que votre page ait fini d'être affichée, vous retarderez d'autant l'affichage de la page. Veillez donc à n'utiliser delay qu'une fois que le document est prêt.
La méthode la plus simple pour ça, c'est de ne déclarer vos balises <script> qu'à la fin de votre document html, juste avant la balise de fermeture du </body>, comme dans cet exemple :

<html>
  ...
  <body>
  ... (ici la structure de votre page) ...
 
  <script type="text/javascript">
  	// ici votre javascript.
  </script>
  </body>
</html>

De façon générale, je ne préconise pas de se servir de l'astuce <body onload="...">, pour différentes raisons dont la plus importante est que l'événement onload de la balise </body> n'est déclenché qu'une fois que tous les documents de la page ont été réléchargés, images comprises. Ça peut prendre un peu de temps...

À la place, je vous invite à fair appel à cet autre script, onDomReady, qui vous permettra d'assainir votre code.

Téléchargement

Le code de cette fonction est très court.

Le voici en version commentée :

/**
 * delay()
 *
 * suspend le script pendant une durée /ms/ exprimée en millisecondes
 *
 * @param			{Integer}			ms			durée de temporisation
 * 
 * @returns			void
 *
 * ========================================================================== */
 
function delay( ms ){
	var end = new Date().getTime() + ms;
	while ( end > new Date().getTime() );
};

Et en version minifiée :

function delay(a){var b=(new Date).getTime()+a;while(b>(new Date).getTime());}

Ou bien peut-être serez-vous intéressé de le télécharger dans un fichier.)

Commentaires