Dans ce tutoriel je vous propose de découvrir comment créer un système de timer relatif en JavaScript. Le principe est d'afficher les dates sous un format plus compréhensible pour les humains : "Il y a 10 minutes".
Pourquoi ne pas utiliser le backend ?
On peut se demander pourquoi ne pas mettre en place un tel système en utilisant une librairie backend (en PHP, Ruby, Python ou autre). La raison principale étant la mise en cache de notre page. Le texte affiché pouvant changer au fil des minutes, on se retrouve à ne plus pouvoir mettre en cache nos pages pour des longues durées sous peine de voir des dates erronnées. L'utilisation du JavaScript permet de remédier à ce problème en générant une date dans un format fixe (timestamp) côté serveur et en générant le texte côté client.
Les intervalles
Afin de ne pas avoir à faire de conditions complexe on va créer un tableau pour stocker notre configuration. Ce tableau contiendra des objets pour chaque type d'interval
- time, définit le temps à partir duquel ce texte sera affiché
- text, définit le texte à afficher (%d sera remplacé par un nombre)
- divide, permet de définir l'unité (par combien on doit diviser le nbre de seconde pour obtenir la valeur qui sera placée dans %d)
let terms = [{
time: 45,
divide: 60,
text: 'moins d\'une minute'
}, {
time: 90,
divide: 60,
text: 'environ une minute'
}
// .....
]Pour le reste du script on notera surtout l'utilisation du requestAnimationFrame afin de limiter les appels inutils à notre timer.
