Pourquoi améliorer les performances ?

Bon à priori personne ne vous pose cette question! Mais on va y répondre brièvement. Il est essentiel d’augmenter les performances et de penser a optimiser son code source de façon automatique en JavaScript.

Une mauvaise optimisation peut causer l’arrêt brutal du navigateur du client, qui perd alors tous les sites en cours de consultation et tous les résultats calculer avant le crash.

Une application est amenée également à évoluer, ce qui implique de rajouter des fonctionnalités ou d’améliorer celles existantes. Donc plus de code, plus de calcul/travail, plus de mémoire utilisé. Résultat: des applications de plus en plus lentes.

Comment mesurer les performances

J’utilise depuis peu un site qui permet très facilement de comparer le fonctionnement de différente méthode pour un même résultat. On obtient de jolies graphiques et des stats très bien faite permettant de trouver la meilleure des solutions.

Ce site s’appelle jsPerf.com et permet de partager les tests aussi facilement que la création.

jQuery: hasClass() versus is()

Pour vous aider un peu sur l’interprétation des résultats de ce site je vous propose deux petites captures d’écran du résultat d’un test comparatif entre les méthodes hasClass() et is() de la librairie jQuery.

Ce test est en utilisation libre à l’adresse suivante : http://jsperf.com/hasclasstest (je n’en suis pas l’auteur).

C’est bien beau! Mais comment décrypter ces différentes informations?

Quelques astuces afin d’améliorer les performances jQuery

Avant tout!

Utiliser au maximum les dernières version de jQuery. L’équipe de dév s’efforce a améliorer les performances entre les versions (tout en pensant au tests de régression sur vos scripts/plugins [:D]).

• Performances améliorés et nouvelles fonctionnalités disponibles
• Des patchs de correction dans les version l.x.y
• Presque 50% des sites utilisent jQuery … Framework très largement testé
• Des milliers d’autres raisons

Utiliser les CDN mis à disposition. Voici quelques liens de repository CDN:

• Google : http://code.google.com/intl/fr-FR/apis/libraries/devguide.html
• Microsoft : http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js
• jQuery : http://code.jquery.com/jquery-1.6.2.min.js

Bien choisir les sélecteurs

Il faut garder à l’esprit que pour obtenir la même chose il existe différents moyens. Pour jQuery, plusieurs sélecteurs peuvent retourner le même objet, mais le temps d’exécution est à vérifier. Il faut savoir que certains sélecteurs sont TOUJOURS plus rapide que les autres.

Les sélecteurs jQuery les plus rapides

Les identifiants et les éléments natifs du DOM sont les plus rapide à atteindre. Pourquoi ? Et bien car il existe des fonctions natives utilisées par le framework jQuery (cf. getElementById()).

• #idDeMonElement
• form, input, label, etc…

Les sélecteurs jQuery les plus lent

Les classes

L’utilisation des classes pour récupérer des éléments est assez lent (comparé aux résultats du chapitre précédent évidemment …) pour la simple raison que la méthode native getElementsByClassName() est présente uniquement dans les navigateurs suivant : IE9+, FF3+, Safari 4+, Chrome 4+, Opera 10.10+. Dans les autres versions de navigateur (notamment IE 7 et 8 qui sont très utilisé) l’utilisation des classes comme sélecteur est plus lente.

Les pseudo-class et attribut

L’utilisation de ces sélecteurs est rapide dans les navigateurs récent car ils incluent les méthodes querySelector() et querySelectorAll() dans leur moteur. Pour les autres, l’utilisation est non optimisé car jQuery doit lui même rechercher parmi le DOM les résultats à retourner.

Conclusion

Pour vous faire un idée sur la rapidité entre les versions et autres, je vous invite à consulter les tests présents sur jsperf.com et plus précisément ces tests : http://jsperf.com/dh-jquery-1-4-vs-1-6/13 et http://jsperf.com/jquery-vs-sizzle-vs-midori-vs-mootools-selectors-test/41.

 Mettre en cache votre objet jQuery

Le test ci-dessous vous montre qu’il est plus rapide de stocker l’objet jQuery dans une variable et d’effectuer les modifications sur cet objet.

Petit plus!

Sur mes projets, je met en place un objet qui s’occupe de sauvegarder en cache ces éléments afin d’y accéder plus rapidement. Le code ci-dessous vous montre un aperçu très bref de la mise en place d’élément en cache.

var $manager = {
	header: $("#header"),
	content: $("#content"),
	footer": $("#footer")
}
// Utilisation du manager
var heightHeader = $manager.header.width();
var heightFooter = $manager.footer.width();
// On stock un nouvel élément dans le manager
$manager.connectBox = $("#connectBox");
$manager.connectBox.fadeIn(3000);

Limiter la manipulation direct du DOM : html(), append(), etc.

Ce test parle de lui même. Le plus rapide est celui qui utilise une seule fois la méthode append() qui permet d’ajouter à la fin de l’élément parent du contenu.

Déléguer aux parents les évènements

Si vous souhaitez capter l’évènement du click sur un élémént de list

• vous allez procéder de la sorte:

// Code HTML
<div id="navigation">
	<a href="#menu1">Menu 1</a>
	<a href="#menu2">Menu 2</a>
	<a href="#menu3">Menu 3</a>
	<a href="#menu4">Menu 4</a>
	<a href="#menu5">Menu 5</a>
</div>
// Code javascript
$('#navigation a').bind('click', function(e) {
	e.preventDefault();
	$this = $(this);
	// Changement de couleur par exemple
	$this.css({
		'color':'red',
		'font-weight':'bold'
	});
});

Un sacré gain de temps d’environ 80% pour l’initialisation de l’évènement.

Enlever tous les appels inutiles

En général, nous avons dans les applications des méthodes qui permettent d’initialiser TOUS les éléments, évènements, objet, etc … Même sur une page qui n’a besoin que de 80% des actions, nous utilisons cette méthode init()…

Pensez à créer une méthode init() pour chaque page et en découpant correctement votre code vous aurez des performances plus agréable visuellement pour l’utilisateur.

Compresser vos JS

un outil fabuleux YUICompressor permet de minifier au maximum vos scripts. Toute la place gagnée par des variables plus courtes, les retours à la ligne enlevés, etc. est utile lors du téléchargement par l’utilisateur de votre fichier javascript.

Encore d’autres

Cette liste n’est pas exhaustive et peut-être sujet à modification. Si vous avez quelques idées, je peut venir les intégrer à cette mini-liste.

Conclusion

On peut améliorer les performances de l’utilisation de jQuery en appliquant les bonnes méthodes. Ce n’est pas car le framework jQuery nous met à disposition différentes moyens d’atteindre l’objectif qu’ils sont tous équivalent sur le plan des performance. Il faut donc apporter un soin particulier au choix de cette méthode et essayer de prendre de bonnes habitudes.

Je vous souhaite un bon dév’

Pour mettre en place cette configuration il y a certainement plusieurs méthodes. Je vais ici vous en démontrer une qui permet d’importer une nouvelle version jQuery adaptée au nouveau script sans pour autant altérer le fonctionnement du site.

Pourquoi importer une nouvelle version de jQuery sans écraser l’ancienne?

Vous allez me dire pourquoi vouloir conserver les deux versions jQuery? Et bien on peut avoir besoin de mettre en place ce genre d’artifice dans différents cas de figure mais le vrai pourquoi du comment, c’est que les versions de jQuery sont par définition différentes et suivant les scripts installés sur l’application non compatible.

Cas concret : WordPress

Prenons par exemple WordPress. Ce populaire moteur de blog permet très facilement d’intégrer une multitude de plugins. La dernière version de WordPress (version 3.3.1) inclut une version de jQuery récente et il se peut que certains plugins plus anciens nécessitent une version antérieure de jQuery. Il est donc possible de créer des variables utilisées uniquement par ces plugins pour les protéger de tous changement de version jQuery au niveau du coeur de jQuery ou du template WordPress.

Cas concret : réseaux sociaux

Prenons l’exemple de l’intégration des différents plugins sociaux disponibles sur facebook, google plus, twitter et autres. Ces derniers sont inclus via un code javascript, dans la plupart des cas, à placer dans le code source de l’application. Ces plugins sociaux nécessitent soit des librairies propriétaires, soit d’autres libres comme jQuery, etc. L’objectif est donc de mettre à disposition de façon simple aux utilisateurs ce plugin sans modifier le comportement normal de l’application.

Comment utiliser ces deux versions de jQuery simultanément ?

Sauvegarde de la librairie jQuery courante

Il faut préserver la librairie actuelle afin de la rendre de nouveau disponible après l’inclusion de notre version jQuery.

var jQueryOld = jQuery.noConflict();

Importer la nouvelle librairie jQuery et la sauvegarder

On va maintenant inclure notre librairie jQuery.

var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.onload = scriptLoaded;
newScript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
headID.appendChild(newScript);

Ce code permet d’inclure la version 1.7.1 de jQuery. Une fois la librairie chargée, la méthode scriptLoaded sera appelée. Dans cette méthode, nous allons procéder à la sauvegarde de notre jQuery 1.7.1.

var jQuery171 = jQuery.noConflict();

Restaurer l’ancienne version jQuery

$ = jQuery = jQueryOld;

A lire

Voici un article très intéressant concernant la création d’un “web widget” en utilisant jQuery : http://alexmarandon.com/articles/web_widget_jquery/

Conclusion

Cela permet de maintenir la dépendance des plugins ou script externe sans pour autant générer des erreurs dans le déroulement de l’application.

Bon dév’

Des services de ce genre existent comme JsBin ou bien encore JsFiddle. Pour des expérimentations au niveau javascript, ils sont plutôt pas mal. Cependant, lorsque l’on veut faire un peu de CSS, ils sont beaucoup moins adaptés. Pour palier à cela, une des solutions possibles est Dabblet.

Présentation du service

Dabblet est un editeur de code en ligne centré sur le CSS3. Il est très simple et reprend une interface similaire à ses compères. Un des premier aspect qui se dégage de l’application et sa grande fluidité et la similarité avec un éditeur classique.

Bref, le premier contact a été très bon de mon côté, mais de quoi est capable Dabblet?

Fonctionnalités

Pourquoi utiliser dabblet et non pas JsFiddle ou bien encore JsBin lorsque l’on jouer avec du CSS3?
Les réponses ci-dessous :

• Tout d’abord, aucune action sur la page est nécessaire pour mettre le rendu à jour, tout est fait en instantanée. C’est très agréable et cela évite les clics incessants sur un bouton “modifier” !
• Il est possible de sauvegarder son travail directement sur github gist et tout cela via ajax. Pas besoin d’attendre le rechargement de la page donc pour continuer à travailler.
• Des raccourcis claviers sont disponibles comme sur un éditeur de code classique (Selon le navigateur et dans mon cas, certains rentrent en conflit avec celui-ci ce qui donne des résultats pas géniaux…)
• De nombreux systèmes de prévisualisation de propriétés CSS3. C’est très pratique de voir combien dure 3s ! Cela parait inutile mais ça évite de devoir tester son application pour voir ce que cela donne. De la même manière, on a la prévisualisation de dégradés, de mesures, de couleurs, d’angles …
• Il est possible de personnaliser la disposition des éléments de l’interface.

Je n’ai pas fait une liste exhaustive de toutes les fonctionnalités de Dabblet mais de celles qui me paraissaient les plus intéressantes.

ScreenShot

Quelques exemples de preview d’attributs de CSS

Conclusion

Dabblet est un outil très récent et très intéressant. En apparence, il se rapproche un peu des autres éditeurs en ligne, cependant il est très axé design et contient des petits détails très utiles qui lui permette de se rapprocher d’un éditeur classique.

Liens

Pour terminer cet article, les sources sur lesquelles s’appuie le contenu que je vous invite à lire :

• Le site de Dabblet : http://dabblet.com
• Le blog et le post traitant de Dabblet par sa créatrice  : http://lea.verou.me/2011/12/introducing-dabblet-an-interactive-css-playground/

Je vous laisse vous faire une idée en lisant quelques un des articles suivant:

• http://lci.tf1.fr/economie/entreprise/google-maps-google-condamne-en-france-pour-abus-de-position-dominante-6967121.html
• http://www.lavoixdunord.fr/France_Monde/actualite/Secteur_France_Monde/2012/02/01/article_google-condamne-a-verser-500-000-euros-de-dommage.shtml
• http://www.developpez.com/actu/41032/Google-Maps-gratuit-ne-plait-pas-a-la-justice-francaise-vers-la-fin-de-l-API-gratuite-pour-les-developpeurs/
• http://www.liberation.fr/medias/01012387291-google-maps-condamne-en-france-pour-abus-de-position-dominante
• http://tempsreel.nouvelobs.com/high-tech/20120201.OBS0346/google-condamne-en-france-pour-abus-de-position-dominante.html

Je vous invite à visiter le site officiel: http://www.kirkas.ch/ascensor/

Pour des informations sur la manipulation de ce plugin je vous invite à lire l’article du blog megaptery à cette adresse : http://www.megaptery.com/2011/09/ascensor-prenez-l-ascenseur-avec-jquery.html

Bon dév’ 

Pour commencer, cette article n’est pas un cours ou un tuto, je le qualifierais plutôt d’un décryptage des différentes balises que nous offre HTML5.

Le HTML5 ! Kezako …

Le HTML5 est le dernier né du standard HTML. Ce dernier créé en 2000 et standardisé en 1997 avec HTML4, s’est offert un relooking complet sur des propositions de spécification de Opera Software. Bon trêve de blablatage, quoi de changé côté technique ?

Et bien beaucoup de simplification sur les balises (DOCTYPE, LINK, etc), de nouvelles balises qui permettent d’organiser de façon sémantique nos pages web, de nouveaux attributs (data-*, etc). Au final ! Beaucoup de changement tous aussi intéressant les uns que les autres.

Pour commencer, je vais essayer de mettre à plat les nouvelles balises disponibles dans les spécifications HTML5.

Balises HTML5

Le but de ces nouvelles balises et de leurs réorganisations permet d’offrir aux moteurs de recherche ou à tout autre outils d’analyse sémantique, une hiérarchisation complète de notre document. Cela permet à terme de retrouver de façon plus précise le document et de cibler au mieux les recherches utilisateurs.

Dans l’ancienne version, nous utilisions allègrement les balises DIV pour structurer notre document. Aussi bien visuellement que sémantiquement. Voici un petit exemple qui montre la conversion de la structure d’une page classique HTML4 en langage HTML5.

Organisées en catégorie

La spécification HTML5 concernant les balises, organise et range ces dernières en 7 catégories. Pour vous aider à mieux comprendre leurs agencements, je vous invite à consulter la spécification en ligne en cliquant sur le schéma ci-dessous.

Pour décrypter ce schéma je vais expliquer brièvement le fonctionnement de chacune d’entre elle.

Zoom sur la catégorie sectioning

Cette catégorie comporte quatre balises : section, nav, aside et article. Je vais récapituler leurs spécificités.

<section/>

Cette balise permet de regrouper de façon thématique du contenu dans le document ou l’application. Elle permet également de remplacer les <div/> pour structurer le document.

Exemple d’utilisation:

• Différente page dans le cas d’onglet dans une boite de dialogue
• Page d’accueil avec plusieurs sections : News, Intro, Contact, etc …

En général, à chaque fois que l’on rajoute un titre, on doit implémenter une nouvelle section!

<nav/>

Cette balise permet de mettre en place des liens pour naviguer entre les différents documents de notre application. Ces liens doivent être uniquement des liens internes.

 Aucune publicité ou lien externe dans cette balise

<aside/>

Cette balise à été implémenter pour permettre de diffuser du contenu indirectement lié au contenu. C’est à dire que dans une section, si on aborde un sujet distinct du contenu, il faut placer ce contenu dans la balise <aside/>

Exemple d’utilisation:

• encadré,
• publicité,
• élément de page de navigation,
• tout autre contenu différent de celui du document

<article/>

La balise <article/> permet de diffuser du contenu externe ou indépendant qui peut être réutilisé. Le contenu présent dans cette balise se suffit à lui-même pour être compréhensible.

Exemple d’utilisation:

• articles de journaux ou de blog

 Les balises footer et header qui appartiennent à la catégorie FLOW et non à celle SECTIONING.

Aller plus loin

• http://www.w3.org/TR/html5/
• http://html5demos.com/
• http://www.html5.fr/
• http://www.html5rocks.com/en/

Voilà ! J’espère vous avoir un peu guidé sur le HTML5 qui en est à ses premiers pas. A vous de le rendre populaire et indispensable!

Bon dév’

Sauf que cette méthode ne fonctionne pas correctement ! Voici une solution en C#.

Il faut donc passer par une autre solution : tester un “ping” vers un serveur joignable. Si le “ping” est un succès, alors on peut considérer que l’utilisateur possède une connexion active.

Dans notre exemple, nous réalisons un “ping” vers l’ip de Google (209.85.229.94).

private string connectionStatus;
function CheckConnection(){
	var timeout : float = 20f;
	var waitUntil:float = Time.realtimeSinceStartup + timeout;
	var ping : Ping= new Ping("209.85.229.94");
	connectionStatus= "Checking network...";
	while (Time.realtimeSinceStartup < waitUntil){
		if (ping.isDone){
		    connectionStatus= "Network available";
		    return ;
		}
	}
    connectionStatus= "No network";
}

Ici, le résultat se fait sous forme de chaîne de caractère. A vous de l’adapter à votre besoin !

Bon’dev !

Qu’est-ce que le SVG ?

Le Scalable Vector Graphics (SVG) est un format de données spécifié par la W3C, créé il y a un petit moment maintenant. Le but est de créer des formes pouvant être très complexe avec des descripteurs simples (dimensions, coordonnées de points), permettant ainsi un changement d’échelle très simple et sans perte (ce qui n’est, rappelons-le, pas le cas des images matricielles comme les JPG, qui causent des pertes en qualité lors d’agrandissement). La définition des couleurs et autres dégradés est également de la partie, le SVG permettant de créer de réelles images en couleur. Ce format est basé sur le XML, les images (qui sont donc des fichiers XML) ainsi générés peuvent être incluses directement dans une page HTML avec la balise svg ou chargées depuis un fichier externe, via la balise embed, et le navigateur se charge alors du rendu.

Exemple :

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" height="50">
     <circle cx="25" cy="25" r="23" fill="red" stroke="blue" stroke-width="2" />
</svg>

Donnera un disque rouge de centre le point [25,25], de diamètre 23px et entouré d’un trait bleu de 2px d’épaisseur.

XML, donc éléments DOM ?

Le SVG étant basé sur le XML, on peut alors profiter des deux poids lourds du web, le CSS et le Javascript. En effet, on peut librement définir des classes CSS et les appliquer à nos éléments, ou manipuler les éléments DOM en Javascript. Les avantages sont donc énormes : on peut alors créer une image dont on peut changer très rapidement les couleurs via CSS sans devoir tout reprendre dans son éditeur d’image, mais également animer cette image via Javascript, sans devoir créer un GIF animé, dont les limites concernant les couleurs (et donc la qualité) sont un réel frein au web 2.0 et aux efforts graphiques que celui-ci impose.

Conclusion

Les possibilités du SVG sont énormes : vous pouvez définir des dégradés, inclure des images PNG, JPG etc. dans votre SVG, interagir avec votre image via Javascript et en modifier son aspect via CSS. Évidemment tout n’est pas parfait, il n’y a par exemple pas de gestion de 3D, la création de telles images n’est pas forcément des plus simples, mais ce format est, je pense, une bonne alternative à certaines images selon les applications. Par exemple, si vous avez regardé la démo de mon billet sur les timers en Javascript, sachez que les flocons sont des images SVG, pour jouer facilement sur leur taille, transparence et ne pas avoir à charger une image externe juste pour afficher un disque blanc. Je vous laisse avec une autre petite démo, un cousin relativement proche de l’icône de signalement de votre position dans Plans sur iPhone, qui peut servir dans certaines applications web. Je laisse votre imagination travailler !

Have fnu coding!

Les Objects

Voici la structure de base pour déclarer une structure de donnée.

var unObjet = {}; // Un objet vide
var un Objet2 = new Object(); // Un objet vide également

Cette structure est considéré comme un tableau associatif, on peut venir associer des données à autre chose qu’un indice entier croissant. Par exemple on va écrire un objet calcul qui nous permettra d’effectuer les opérations basiques.

var Calcul = {
     add : function(a, b) { return a + b; },
     sub : function(a, b) { return a - b; },
     mul : function(a, b) { return a * b; },
     div : function(a, b) { return a / b; }
};
Calcul.add(3, 2); // Affiche 5
Calcul['sub'](3, 2); // Affiche 1
// etc ...

Comme vous pouvez le voir, on peut appeler les méthodes de cette objet de différentes manières.  En Javascript, tout est considéré comme un objet. Les tableaux, les chaines de caractère, les fonctions et même les nombre. Je reviendrai dans un autre article sur la programmation Objet en Javascript, pour le moment, je vais vous parler de l’objet natif Array.

Les Array

Les tableaux de type Array (non associatif) se déclare de la manière suivante en Javascript :

var unTableau = []; // Un raccourci pour var unTableau = new Array();
unTableau[0] = "Un chiffre 0";
unTableau[1] = "Un chiffre 1";
// équivalent à
var unAutreTableau = ["Un chiffre 0", "Un chiffre 1"];
// équivalent à
var encoreUnAutreTableau = new Array("Un chiffre 0", "Un chiffre 1");

La syntaxe est sensiblement similaire à la déclaration des objets. Il est également possible de mélanger les types de données dans le tableau, pour comparer avec l’exemple précédent, voici le même résultat mais en utilisant l’objet Array.

var Calcul = [
     function(a, b) { return a + b; },
     function(a, b) { return a - b; },
     function(a, b) { return a * b; },
     function(a, b) { return a / b; }
];
Calcul[0](3, 2); // Affiche 5
Calcul[1](3, 2); // Affiche 1
// etc ...

Bon ok pour cet exemple, on préfère largement l’Objet à l’Array. Donc on se pose maintenant la question suivante : Qu’est ce qui fait que l’on utilise quand même l’Array dans certains cas. Tous simplement car c’est un objet natif à javascript au même titre que l’objet String, Date, etc … Vous pouvez consulter la doc sur ce site : http://fr.selfhtml.org/javascript/objets/array.htm. Il met à disposition sans développement supplémentaire une suite de fonctionnalités assez intéressante comme la gestion de pile en FIFO ou FILO avec les méthode pop(), push() et shift(). Ou encore des méthodes de d’extraction d’une partie du tableau, de taille, de trie, etc. Une attention particulière à l’attribut length() qui retourne toujours 1 de plus que le nombre maximum de l’indice (ce qui est logique vu que l’on part de 0 … [:D]). Mais il faut se méfier également de cet attribut comme le montre l’exemple suivant:

var monTableau = [];
monTableau.length; // Affiche 0
monTableau.push("Toto est présent!");
monTableau.length; // Affiche 1
monTableau[100] = "Tarte au centième";
monTableau.length; // Affiche 101 !!!

Allez plus loin avec les Objets javascript

Si vous souhaitez en savoir plus sur les Objets javascript, je vous invite à visiter ce site http://t-templier.developpez.com/tutoriel/javascript/javascript-poo1/ qui est vraiment bien fait et pose de bonnes bases pour la POO en Javascript.

Bon dév’

Présentation générale

Il existe de façon de gérer des timers en Javascript : le timemout qui permet d’exécuter du code après un certain temps, et l’intervalle qui permet, comme son nom l’indique, d’exécuter du code à intervalle régulier.

L’intervalle

Commençons par le plus simple : l’intervalle. Son fonctionnement est très simple :

setInterval('alert("ok")', 10000);

Ceci aurai pour effet d’afficher un message “OK” toutes les 10 secondes. Le temps est pris à partir du moment ou la fonction est appelé. Si vous avez défini une fonction, vous pouvez également l’appeler simplement :

function doSomething() {
     alert("doSomething appelé");
}
setInterval(doSomehting, 10000);

Le timeout

Avant tout comment ça fonctionne ? Là encore ce n’est pas très compliqué, il fonctionne d’ailleurs comme l’intervalle, sauf qu’une fois qu’il a exécuté son action il s’arrête :

setTimeout('alert("ok")', 1000);
function doSomething() {
     alert("doSomething appelé");
}
setTimeout(doSomehting, 3000);

Ceci affichera “ok” au bout d’une seconde et “doSomething appelé” au bout de 3.

Timer

Alors, comment faire un timer ? Le plus simple c’est de faire une fonction qui ajoute elle-même un timeout. Si on reprend l’exemple précédent et que l’on désir que la fonction doSomething soit appelée toute les 0.5 secondes, il suffit de faire ceci :

function doSomething() {
     alert("doSomething appelé");
     setTimeout(doSomehting, 500);
}
doSomething();

Et l’objet ?

Prenons le cas suivant : vous voulez faire des flocons de neige qui tombent (c’est de saison hein). Vous avez une classe pour représenter vos flocons, et vous voulez appeler naturellement la fonction move – fonction qui déplace votre flocons sur l’écran – à intervalle régulier. Et là tout n’est pas parfait. En effet, setTimeout ne gère pas les objets : si dans votre fonction move vous appelez setTimeout(this.move, 20) ou setInterval(this.move, 20), ça ne fonctionnera pas. La seule façon de s’en tirer c’est de créer une fonction qui prend en paramètre un flocon de neige et qui appel la fonction move de celui-ci :

var Flocon = function() {
     this.x = 0;
     this.y = 0;
 }
Flocon.prototype.move = function() {
     this.y ++;
}
function moveFloconTimeout(flocon) {
     flocon.move();
     setTimeout(moveFloconTimeout, 20, flocon);
}
function moveFlocon(flocon) {
     flocon.move();
}
var flocon = new Flocon();
setInterval(moveFlocon, 20, flocon);
// ou
// moveFloconTimeout(flocon);

Et voilà… Je vous laisse avec de la neige qui tombe (qui fonctionne bien sur Chrome/Safari mais qui fait ramer Firefox), ce que j’ai fait pour tester les timers en Javascript, en utilisant jQuery grosso modo que pour les sélecteurs.

Have fnu coding!