Tout d'abord, merci de m'avoir lu. J'apprends actuellement javascript, donc ... désolé pour mon code (et mon mauvais anglais). N'hésitez pas à faire des suggestions.

Je crée un (faux) site internet pour réserver des vélos à Toulouse (France). Une fois que les utilisateurs ont cliqué sur #canvasbtn, je veux démarrer un compte à rebours / minuterie de 20 minutes. À la fin du compte à rebours, je voudrais effacer le stockage de session et le stockage local.

Problème: le minuteur démarre au chargement de la page (pas lorsque vous cliquez sur #canvasbtn). Et je ne trouve pas comment effacer le stockage local lorsque le compte à rebours atteint 0.

https://github.com/ldoba/project-03

Merci de votre aide

const startingMinutes = 20;
let time = startingMinutes * 60;
const canvasbtn = document.querySelector('#canvasbtn');
const countdown = document.getElementById('timer');


//fonction minuteur 
function updateCountdown (){
    const minutes = Math.floor(time / 60);
    let seconds = time % 60;
    let timerStatus = true;
    seconds= seconds < 10 ? '0' + seconds : seconds;

    countdown.innerHTML = minutes + ' : ' + seconds;
    time--;

    if ((minutes + seconds) <= 0){
        clearInterval(interval);
        timerStatus = false;
    } else{
    }
}
//Interval pour rafraichissement chaque seconde
var interval = setInterval(updateCountdown, 1000);

//le timer est activé après avoir appuyer sur le bouton du canvas
canvasbtn.onclick = updateCountdown();

0
lsgssln 23 sept. 2020 à 19:25

3 réponses

Meilleure réponse

Comme je l'ai indiqué dans les commentaires, canvasbtn.onclick = updateCountdown(); est faux car vous exécutez la fonction et l'attribuez au clic.

De plus, setInterval n'est pas précis. Et votre compte à rebours n'expirera pas après 20 minutes après avoir cliqué sur le bouton. Ils devraient être assis sur la page pendant 20 minutes au total (peut-être que vous le voulez). Vous devriez utiliser date () pour gérer la différence dans le temps.

Ci-dessous, j'ai utilisé Date () pour la différence et stocker les valeurs dans localstorage. Je ne démarre le chronomètre que si la valeur est en mémoire ou si le bouton est cliqué.

const maxTime = 20 * 1000 * 60 * 60;

const out = document.querySelector("#out");
function msToTime(duration) {
  let milliseconds = parseInt((duration % 1000));
  let seconds = Math.floor((duration / 1000) % 60);
  let minutes = Math.floor((duration / (1000 * 60)) % 60);
  // let hours = Math.floor((duration / (1000 * 60 * 60)) % 24);

  // hours = hours.toString().padStart(2, '0');
  minutes = minutes.toString().padStart(2, '0');
  seconds = seconds.toString().padStart(2, '0');
  milliseconds = milliseconds.toString().padStart(3, '0');

  //return hours + ":" + minutes + ":" + seconds + "." + milliseconds;
  return minutes + ":" + seconds + "." + milliseconds;
}

let timer;
function countDown() {
  const diff = Date.now() - startTime;
  const remaining = Math.max(maxTime - diff, 0);
  if (remaining > 0) {
    out.textContent = msToTime(remaining);
    timer = window.setTimeout(countDown, 20);
  } else {
     out.textContent = 'complete';
     window.localStorage.removeItem('timer')
  }
}

const storageTime = window.localStorage.getItem('timer');
let startTime = storageTime ? +storageTime : null;

if (startTime) countDown();

document.querySelector("button").addEventListener("click", function (evt) {
  evt.preventDefault();
  if (timer) window.clearTimeout(timer);
  startTime = Date.now();
  countDown();
  window.localStorage.setItem('timer', startTime);
});
<div id="out"></div>

<button>start</button>
0
epascarello 23 sept. 2020 à 18:10

Lorsque la page se charge, le compte à rebours démarre parce que vous appelez directement votre fonction qui est affectée à la variable d'intervalle. Modifiez simplement ce qui suit et supprimez l'intervalle variable

var interval
canvasbtn.onclick = function(){
    interval = setInterval(updateCountdown, 1000)
};

Ajoutez ceci avant clearInterval pour effacer le stockage local

localStorage.clear();
0
Gnanavel 23 sept. 2020 à 17:46

Cette ligne démarre immédiatement votre intervalle dès que la page se charge et commence à appeler updateCountdown toutes les secondes:

var interval = setInterval(updateCountdown, 1000);

Cette ligne exécute la fonction updateCountdown une fois dès que la page se charge:

canvasbtn.onclick = updateCountdown();

Ensuite, comme updateCountdown ne renvoie rien explicitement, il attribue la valeur undefined à l'événement canvasbtn.onclick, ce qui signifie que rien ne se passera lorsque vous cliquerez sur votre bouton.

Ce que vous voudrez faire est de supprimer complètement cette ligne:

var interval = setInterval(updateCountdown, 1000);

Ajoutez ensuite let interval = null au début de votre code et changez votre onclick en quelque chose comme ceci:

canvasbtn.addEventListener('click', () => {
 interval = setInterval(updateCountdown, 1000);
})

En définissant notre variable interval en dehors du gestionnaire de clics, nous autorisons son accès plus tard dans notre fonction updateCountdown, afin que vous puissiez l'effacer.

En enveloppant le setInterval dans un lambda (une fonction anonyme, ce bit: () => {...}) nous nous assurons que l'intervalle est démarré lorsque canvasbtn est cliqué, et non au chargement de la page.

Il y a d'autres problèmes avec votre code, et probablement de meilleures façons de le faire que celles que j'ai décrites ici, mais depuis que vous apprenez, j'essaie de garder ma réponse simple et ciblée. Je ne veux pas trop refactoriser pour vous. J'espère que ça aide. Bonne chance!

0
Griffin 23 sept. 2020 à 17:44