タイマーが0.00になるのに0.00秒でタイマーが止まらない理由が分かりません

昨日タイマーが0秒になっても止まらない理由が分からず下記の質問をさせて頂いた者です
『javascriptのコードの
「if (timeLeft === 0) 」
だとどうしてタイマーが止まらないのか、そして
「if (timeLeft < 0) 」
だと止まるのか、違いがよく分かりません
詳しい方教えて頂けないでしょうか？』

その後皆様に助けられ、実際にtimeLeftをコンソールに表示してみたところ、何度やっても「0.00」となるので「timeLeftが0.00となった時にタイマーが止まるようにすることは可能ではないか？」と思い「if (timeLeft === 0.00) 」としたのですがタイマーが止まることはありませんでした...

「if (timeLeft === 0.00) 」としても0.00秒でタイマーが止まらないのは何故なのでしょうか？

詳しい方教えて頂けないでしょうか？

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>Typing Game</title>
6  <link rel="stylesheet" href="css/styles.css">
7</head>
8<body>
9  <p id="target">click to start</p>
10  <p class="info">
11    Letter count: <span id="score">0</span>,
12    Miss count: <span id="miss">0</span>,
13    Time left: <span id="timer">0.00</span>
14  </p>
15
16  <script src="js/main.js"></script>
17</body>
18</html>

Javascript
1'use strict';
2
3{
4  const words = [
5    'apple',
6    'sky',
7    'blue',
8    'middle',
9    'set',
10  ];
11  let word = words[Math.floor(Math.random() * words.length)];
12  let loc = 0;
13  let score = 0;
14  let miss = 0;
15  const timeLimit = 3 * 1000;
16  let startTime;
17
18  const target = document.getElementById('target');
19  const scoreLabel = document.getElementById('score');
20  const missLabel = document.getElementById('miss');
21  const timerLabel = document.getElementById('timer');
22
23  function updateTarget() {
24    let placeholder = '';
25    for (let i = 0; i < loc; i++) {
26      placeholder += '_';
27    }
28    target.textContent = placeholder + word.substring(loc);
29  }
30
31  function updateTimer() {
32    const timeLeft = startTime + timeLimit - Date.now();
33    timerLabel.textContent = (timeLeft / 1000).toFixed(2);
34
35
36const timerId = setTimeout(updateTimer, 10);
37
38
39if (timeLeft === 0) {
40  clearTimeout(timerId);
41  alert('Game over');
42}
43
44
45}
46
47  window.addEventListener('click', () => {
48    target.textContent = word;
49    startTime = Date.now();
50    updateTimer();
51
52  });
53
54  window.addEventListener('keydown', e => {
55    if (e.key === word[loc]) {
56      loc++;
57      if (loc === word.length) {
58        word = words[Math.floor(Math.random() * words.length)];
59        loc = 0;
60      }
61      updateTarget();
62      score++;
63      scoreLabel.textContent = score;
64    } else {
65      miss++;
66      missLabel.textContent = miss;
67    }
68  });
69}
70attachment(0)
71
72

行動規範の内容に同意します

回答2件

ベストアンサー

「if (timeLeft === 0.00) 」としても0.00秒でタイマーが止まらないのは何故なのでしょうか？

運が良くないと止まりません。setTimeout(updateTimer, 10)としても、きっちり10ミリ秒単位で実行してくれる保証はないので、端数が出ます。

timeLeft === 0.00で判定すると、端数まで含めてきっちり0になったタイミングで実行されないと止まらないことになります（表示上は.toFixed(2)としているので小数2桁しか出ないですが、実際の値はそれ以下の桁があります）。

投稿2020/05/19 22:38

maisumakun

総合スコア146018

tanakashouzoux

2020/05/20 00:24

わざわざご回答頂きありがとうございますm(__)m 「（表示上は.toFixed(2)としているので小数2桁しか出ないですが、実際の値はそれ以下の桁があります）」とのことですが、toFixed(2)は表示上小数第二位まで表示はするが、実際の値はもっと多くの桁数まで持つという事なのでしょうか？？

maisumakun

2020/05/20 00:33

> toFixed(2)は表示上小数第二位まで表示はするが、実際の値はもっと多くの桁数まで持つという事なのでしょうか？？ toFixedは、その桁数の「文字列を生成する」だけのメソッドで、元の値は書き換わりません。

行動規範の内容に同意します

const timeLeft = startTime + timeLimit - Date.now();

この計算式で、時間が過ぎたらどういう結果になるのか考えてみればどうでしょう

投稿2020/05/19 22:39

y_waiwai

総合スコア88042

tanakashouzoux

2020/05/20 00:22

昨日に引き続きご指導ありがとうございますm(__)m 時間が過ぎたら処理は引き続き行われると思います時間が過ぎてしまうこともあるのでしょうか・・・？？コンソールで確かめると0.00となるのですが、それは嘘というか何かの間違いだったりするのでしょうか？

y_waiwai

2020/05/20 07:56

コンソールがどーなるかはどーでも良くて、時間が過ぎたら、timeLeftはどーゆー値になるか考えましょうな。 0にはなりませんよ

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

タイマーが0.00になるのに0.00秒でタイマーが止まらない理由が分かりません

関連した質問