Bonjour,

Après avoir fini mon compte à rebours, j'ai remarqué un petit défaut.

Lorsque je rafraîchis ma page, mon compte à rebours se relance plutôt que de continuer le compte, pourriez-vous m'aider?

Voici mon code:

        function startGRBTimer(duration, display) {
		var timer =  duration, hours, minutes, seconds;
		setInterval(function () {
			days = parseInt(timer / (24*60*60), 10);
			hours = parseInt(timer % (24*60*60) / (60*60), 10);
			minutes = parseInt(timer % (60*60) / 60, 10);
			seconds = parseInt(timer % 60, 10);
			hours = hours < 10 ? "0" + hours : hours;
			minutes = minutes < 10 ? "0" + minutes : minutes; 
			seconds = seconds < 10 ? "0" + seconds : seconds;
			display.textContent = days + "d" + " " + hours + "h " +  minutes + "m " + seconds + "s";
			--timer;
			if (timer <= 0) {
				timer = duration;
			}
		}, 1000);
	}
          var display = document.querySelector("#grb");
          startGRBTimer(60, display);

Merci!

Tu n'as pas stocké de manière persistante la valeur du compte à rebours en cours (session storage, local storage,...), donc au rechargement de la page tout reprend de zéro. C'est ce que dit ton code : au chargement de la page, déclenche le compte à rebours à partir de 60...donc c'est ce qu'il fait chaque fois que ta page est rechargée. Il faut stocker de manière persistante cette donnée et chercher à voir si elle existe et la récupérer au début avant de lancer le compte à rebours.

Quelle serait la meilleure solution pour stocker en optimisant les performances?

Je les ai déjà cités: session storage, ou local storage, selon le comportement voulu.

-
Edité par Genroa 16 août 2018 à 10:10:20

Cela dit, pourrais-tu me renseigner pour pouvoir implanter cela en optimisant les performances? Je suis bien nouveau au javascript..

Hello,

C'est simple en fait -> https://www.alsacreations.com/article/lire/1402-web-storage-localstorage-sessionstorage.html 

Bien différencier la différence entre le local et session.

Attention on reste côté client, donc l'utilisateur peut changer la valeur depuis la console du navigateur...

Évidemment, rien de ce qui se passe coté client n'est sécurisé.

Pour l'utiliser, Lucky13 a donné une source, mais google aurait très bien fait l'affaire. Si tu as du mal à t'en servir, je te conseille de revoir le cours de base sur le JS.

 function startGRBTimer(duration, display) {
    var timer =  duration, hours, minutes, seconds;
    sessionStorage.setItem("saver", "timer");
    setInterval(function () {
        days = parseInt(timer / (24*60*60), 10);
        hours = parseInt(timer % (24*60*60) / (60*60), 10);
        minutes = parseInt(timer % (60*60) / 60, 10);
        seconds = parseInt(timer % 60, 10);
        hours = hours < 10 ? "0" + hours : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        display.textContent = days + "d" + " " + hours + "h " +  minutes + "m " + seconds + "s";
        --timer;
        if (timer <= 0) {
            timer = duration;
        }
    }, 1000);
}
      var display = document.getElementById("timer").innerHTML = sessionStorage.getItem("saver");
      startGRBTimer(60, display);

Voici ce que j'ai essayé, ça n'a pas l'air de fonctionner, où est l'erreur?

Ben...tu stockes la chaine de caractères "timer" dans la clef "saver" du sessionStorage. Donc tu ne stockes pas la date (mais de toute façon la ligne 2 n'a aucun sens et doit exploser une erreur), mais en plus, même si tu la stockais, tu ne cherches à la récupérer nul part. Tu recommences toujours à 60 ligne 20 et tu cherches à stocker 60. De plus, comme la fonction appelée régulièrement ne met pas non plus à jour le session storage, ça ne risque pas de fonctionner.

Je ne comprends pas... j'esaie en vain rien n'y fait :/

Alors à priori, il faut commencer à chercher si la clé stockée en sessionStorage existe, logique, c'est la 1ère chse à faire.

Si OUI 

  Si clé <= 0  alors la remettre à 60 (enfin selon ce que tu veux faire)

  Sinon duration = valeur de la clé 

Si NON  alors duration = 60 et on créé la clé en sessionStorage

La ligne 20 tu passes toujours en paramètre le valeur de 60, il faut passer en valeur selon la condition NON ou OUI et Si / Sinon la duration = clé ou 60

Bref écrire en pseudo-code (écrire en littéral Francais  ou Anglais) simplifie la mise en place de la logique / conception.

ps: je laisse Genroa me corriger au cas ou, j'y vois mal sur mon mobile 

-
Edité par Lucky13 16 août 2018 à 18:21:50

Je ne comprends pas vraiment ce système de clé, il y a la valeur et la clé mais quels sont les différences? Je me suis renseigné un peu partout, même sur les forums anglais et je ne trouve pas ce que je recherche :/

Bein c'est comme un tableau[] tu peux avoir les indices ou des clés.

ex de l'article :

sessionStorage.setItem("couleur","vert")

Stockage: Le 1er argument "couleur" est la clé qui a pour valeur "vert"

var couleur = sessionStorage.getItem("couleur");

On affecte à la variable var = couleur le contenu de la clé, donc tu obtiens "vert"

Du coup var couleur = "vert" au final, dans ton cas tu aurais var duration = parseInt("60",10); -> la je caste un string en entier (int)

Pour toi ça ressemblerait à un truc comme ceci :

if(typeof sessionStorage!='undefined') {
  
  // Récupération de la valeur dans web storage
  var duration = sessionStorage.getItem('duration');
    
  // Vérification de la présence du compteur
  if(duration!=null) {
    
    if(duration > 0){
      // Si >= 0 , on convertit en nombre entier la chaîne de texte qui fut stockée
      duration = parseInt(duration,10);
    }
    else duration = 60; // on remet le compteur à 60
	
	// appeler la fonction
	startGRBTimer(duration, display)
  }
  
  else{
    sessionStorage.setItem('duration', '60'); // on crée la clé en sessionStorage car elle n'existait pas (1er chargement de la page)
	duration = 60;
	startGRBTimer(duration, display) // appeler la fonction
  }
  
} else {
  alert("localStorage n'est pas supporté");
}

Je te laisse gérer l'argument "display"

je tape sur un mobile, 8 fois que j'essais d'écrire le code donc vérifier les erreurs mais le principe est la...

-
Edité par Lucky13 16 août 2018 à 21:30:59

Je me répète, mais sans vouloir être méchant, si la notion de clef->valeur n'est pas claire pour toi, il va falloir revoir tes bases du JS, avec des structures de données comme les Maps ou les objets littéraux. Et possiblement pas sur OC, où le cours est obsolète. Si tu n'as pas les connaissances pour comprendre ce que tu fais, te donner du code tout chaud prêt à l'emploi dans la main ne te fera aucun bien.

Pour tout le bloc de conditions que tu as écrit Lucky13, on peut le résumer à ça:

// Récupération de la valeur dans web storage
let duration = sessionStorage.getItem('duration') || 60;
duration = duration >= 0 ? duration : 60;

// appeler la fonction
startGRBTimer(duration, display)

On récupère la valeur dans le sessionStorage, ou 60 si aucune n'est stockée. Puis on la reset à 60 si elle est négative.

-
Edité par Genroa 16 août 2018 à 22:30:05

Vi mais déjà qu'il n'a pas les bases, si tu en plus tu utilises une ternaire et un let à la place d'un var...  

Puis je vérifie le support du webStorage, même si de nos jour cela semble acté.

Pour le reste tu as raison, sans les bases pas la peine d'aller plus loin, il faut revoir le cours et pratiquer un peu avant de se lancer dans un projet, et donner une solution ne lui sera pas bénéfique puisqu'il ne pourra pas le modifier par la suite.

Bon en tout cas il a tout ce qu'il lui faut.

-
Edité par Lucky13 16 août 2018 à 22:54:42

Le storage est standard sans exception partout. Mais je ne remplaçais que le bloc conditionnel lié à la récupération. S'il le veut, il peut toujours faire la vérification avant bien sûr (mon avis reste que s'il n'a pas les bases pour utiliser ce genre de choses, il ne devrait pas en être à toucher du web storage je pense, ni même du JS dans le DOM. Les bases du JS ne semblent pas encore solides)

Ouaip je suis d'accord, bon attendons de voir ou il en est.

J'ai finalement réussi, en vous remerciant grandement!

Excellente journée à vous.