Bug de remise à 0 (JQuery) Résolu/Fermé

Question

Salutations, Je suis en train de terminer un programme. Tout fonctionne comme je le souhaite mais un bug me résiste: Je ne parviens pas à faire en sorte que le compte à rebours redémarre à 50s, lorsque que l'on choisi un nouveau thème. Where is la coquille, svp ? $(document).ready(function () {//n'apparait qu'une fois// var chrono; // gestion du chrono var decompteLance = 'non'; // pour empêcher le bouton Question de lancer plusieurs fois le chrono var aleatoire; // nombre aléatoire var themes = []; // affichage de 4 thèmes aléatoires var numTheme = ''; // thème choisit var questions = []; // questions déjà posées var precedente = null; // question/réponse précédente // Affichage de 4 thèmes aléatoires $('#themesAleatoires').on('click', function () { $('#themes').text(''); // vide la liste des thèmes themes = []; // vide le tableau de mémorisation des thèmes choixThemes(); // recherche 4 thèmes de façon aléatoire afficheThemes(); // affiche les 4 thèmes }); // Choix d'un thème particulier (grise le bouton et le desactive) // la syntaxe d'appel est différente car les boutons de choix n'existent pas encore au chargement de la page $(document).on('click', '.choisirTheme', function () { numero = $(this).attr('value'); numTheme = themes4alasuite[numero][0]; // mémorise le numéro du thème choisit theme = themes4alasuite[numero][1]; // $('#theme').text('THEME : ' + theme); // affiche le thème choisi en-dessous du bouton Question $(this).css('background-color', 'grey'); // colore le bouton en gris $(this).attr('disabled', 'disabled'); // désactive le bouton }); $('#questionButton').on('click', function () { if (numTheme === '') { alert("Choisissez d'abord un thème"); } else { if (decompteLance === 'non') { $secondes = 50; // définit le nombre de secondes $('#countdown_sec').text($secondes); //affiche 50 dans le chrono timerManager.start($secondes); // lance le timer decompteLance = 'oui'; } $("#reponse").text(""); question(); } }); // Ajoute des points à une équipe $('.compteur').on('click', function (e) { e.preventDefault(); $val = $(this).attr('value').split('|'); $champ = '#compteur' + $val[0]; $new_score = parseInt($($champ).text()) + parseInt($val[1]); if ($new_score < 0) { $('#compteur' + $val[0]).text('0'); } else if ($new_score <= 3) { $('#compteur' + $val[0]).text($new_score); } else { $('#compteur' + $val[0]).text('ÉQUIPE QUALIFIÉE') } }); // Remet le nombre de points d'une équipe à zéro $('.mise0').on('click', function () { $val = $(this).attr('value').split('|'); $champ = '#compteur' + $val[0]; console.log("CHAMP", $champ); $($champ).text('0'); }); // Recherche 4 thèmes de façon aléatoire function choixThemes() { var min = 0; var max = 20; aleatoire = Math.floor(Math.random() * (max - min)) + min; // cherche un nombre aléatoire if ($.inArray(parseInt(aleatoire), themes) === -1) { // si le numéro de la question ne figure pas dans le tableau des questions déjà posées themes.push(aleatoire); // rempli le tableau des thèmes déjà choisis } if (themes.length < 4) { // relance la function tant qu'on n'a pas 4 thèmes choixThemes(); } } // Affiche, sous forme de boutons, les thèmes trouvés function afficheThemes() { $.each(themes, function (index, value) { $('#themes').append(''); }); } // Affiche une question aléatoire dans le thème choisi function question() { var min = 0; var max = 11; aleatoire = Math.floor(Math.random() * (max - min)) + min; // cherche un nombre aléatoire if (questions.length === max) { alert('Toutes les questions ont été posées !'); } else if ($.inArray(parseInt(aleatoire), questions) === -1) { // si le numéro de la question ne figure pas dans le tableau des questions déjà posées quest = listeQuestions[numTheme][aleatoire][1]; $('#question').text(quest); // affiche la nouvelle question questions.push(random); // rempli le tableau des questions déjà posées console.log(questions); } else { // rappelle la fonction pour trouver un nouveau nombre aléatoire non utilisé } } $("#reponseButton").on("click", function () { $("#reponse").text(listeQuestions[numTheme][aleatoire][2]); // affiche la réponse }); $('#stopChrono').on('click', function () { $("#countdown_sec").text("0"); timerManager.stop("0") }); // A corriger // Le chrono s'enclenche donc dès que l'on pose la première question timerManager = { start: function ($secondes) { $secondes = $secondes - 1; // provoque le décompte if ($secondes >= 0) { // tant que le chrono est supérieur à zéro chrono = setTimeout(function () { // éxécute le code toutes les 1000 millisecondes $('#countdown_sec').text($secondes); // affiche le temps restant timerManager.start($secondes); // rappelle la fonction }, 1000); } else { timerManager.stop(); // arrête le chrono } }, stop: function () { // to be called when you want to stop the timer clearTimeout(chrono); $('#countdown_sec').text('0'); } }; Merci. N

Totoro · Answer

Salut, dur de dire quoi que ce soit sans savoir ce que vous voulez faire et voir le HTML concerné. Pour le décompte c'est simple il n'y en a pas puisque vous utilisez un setTimeout d'eune valeur de 1000 ms setTimeout(function () { // éxécute le code toutes les 1000 millisecondes $('#countdown_sec').text($secondes); // affiche le temps restant timerManager.start($secondes); // rappelle la fonction }, 1000); Si vous voulez un décompte il faut donc rajouter une variable qui fait le décompte à mettre dans la boucle du setTimeout (voir requestAnimationFrame qui est beaucoup plus performant et pratique à utiliser sinon). Euh rien ne vous choque ici, étonant que vous n'ayez pas d'erreur: function choixThemes() { var min = 0; var max = 20; aleatoire = Math.floor(Math.random() * (max - min)) + min; // cherche un nombre aléatoire if ($.inArray(parseInt(aleatoire), themes) === -1) { // si le numéro de la question ne figure pas dans le tableau des questions déjà posées themes.push(aleatoire); // rempli le tableau des thèmes déjà choisis } if (themes.length < 4) { // relance la function tant qu'on n'a pas 4 thèmes choixThemes(); } } Une fonction qui s'appelle elle même? La récursivité à ses limites. ps: je ne vois pas l'utilité de JQuery ici puisque vous ne faites appel qu'au sélecteurs JQuery ni des variables JQuery. Le seul résultat que vous obtenez(sans parler de la mémoire) est de ralentir le chargement de votre page et le le temps d’exécution(en passant par $maVariable et la boucle JQuery) par rapport à du pur JavaScript qui ne demanderait qu'un changement minime de syntaxe sur votre code(écrire vos sélecteurs en vanilla JS donc). Et bon du délai dans le temps d'exécution sur un chrono précis au millième de secondes ça paraît pas fameux surtout que ça peut facilement être évité ici.

Nirsab · Answer

Questions pour un Champion

MAX À LA SUITE

4 thèmes sont proposées. L'équipe éliminée à la manche précédente choisira le thème pour chaque équipe en course. Les joueurs de l'équipe répondront à tour de rôle. Les questions sont posées aléatoirement. Chaque réponse apporte 1 point. En cas de mauvaise réponse, le score retombe à 0 et ne sera conservé que le score final. Le but est d'avoir le maximum de points possibles (jusqu'à 11), le tout en 50 secondes ou moins. En cas d'égalité, un jeu décisif aléatoire sera proposé. Les 2 équipes ayant réalisé les meilleures performances seront qualifiées pour la manche finale.

ÉQUIPES QUALIFIÉES + JOUEUR A, B, C	SCORE	COMPTEUR
1ère Equipe Qualifiée	0
2ème Equipe Qualifiée	0
3ème Equipe Qualifiée	0

Thème...

Temps restant :

0 secondes

Merci pour la réponse. Comme dit, en soit tout le code fonctionne à l'exception de ce détail énoncé dans le premier message. Voici le HTML... (je crois que vous vous êtes trompés dans les balises de codes ;)

Bug de remise à 0 (JQuery)

2 réponses

Discussions similaires