JSでタイマー関数を使って、TextContentを消したり付けたりしたい

前提・実現したいこと

５✖５のテーブルのマスを作って、モグラたたきゲームを作っています。
やりたいことは、タイマー関数を使って1秒ごとにテーブルに”●”をTextContentに表示し、
何もしなければ1秒後に自動的に消えて、次の”●”が表示されるようにしたいです。

（こんな感じです）
1秒：”●”　1秒後：　新しい”●”　1秒前に表示された”●”→消える

発生している問題・エラーメッセージ

”●”が表示された瞬間に消えます。
 //timer2 = clearTimeout();//
でタイマーを消してるつもりですが間違ってるのでしょうか？

該当のソースコード

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="utf-8">
   <style>
    td.box{
    }

   </style>
 <script>
     "use strict";

     var timer,timer2;
     var s;
     var date =[];
     function init() {
         //繰り返しでテーブルを作成
         var table = document.getElementById("table1")
         for (var i = 0; i < 5; i++) {
             date[i] = [ 0, 0, 0, 0, 0];
             var tr = document.createElement("tr");
            for (var j = 0; j < 5; j++) {
                var td = document.createElement("td");
                td.className = "box";
                td.onclick = click;
                td.id =  5 * i + j;
                tr.appendChild(td);
             }
             table.appendChild(tr);
         }
         //1秒ごとに呼び出してる
         timer = setInterval(tick, 1000);
     }
     //クリックされたら
     function click(e) {
         var c = e.target;
         c.textContent = "〇";
        
     }
     //毎秒呼ばれる
     function tick() {
         timer2 = clearTimeout();
         var a = Math.floor(Math.random() * 5);
         var b = Math.floor(Math.random() * 5);
         s = 5 * a + b;
         date[a][b] = 1;
         document.getElementById(s).textContent = "●";
         timer2 = setTimeout(crea, 999);
     }

     function crea() {
         document.getElementById(s).textContent = "";
        
     }
    
 </script>
</head>
<body onload="init()">
   <table id="table1"></table>
</body>h
</html>

試したこと

呼び出すタイミングを
timer2 = setTimeout(crea, 999);
と、１０００ではなく９９９にしてみましたがうまくいきませんでした。

補足情報（FW/ツールのバージョンなど）

efcode

2018/06/25 00:16

Firefoxですが、1秒毎にどこかしらに●が表示されるように動作していますよ。clearTimeoutは強制解除する場合に使います。(メモリリークするのかどうかなどは知りませんすいません。)

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

回答3件

clearTimeout()は引数としてタイマーIDを必要とします。
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/clearTimeout

投稿2018/06/25 00:43

x_x

総合スコア13749

ベストアンサー

javascript
1//毎秒呼ばれる
2function tick() {
3    // timer2 = clearTimeout(); // <-- 使い方誤り。clearTimeout(timerId)が正解。
4    var a = Math.floor(Math.random() * 5);
5    var b = Math.floor(Math.random() * 5);
6    s = 5 * a + b;
7    date[a][b] = 1;
8
9    // document.getElementById(s).textContent = "●";
10    // ↑グローバル変数のsで管理しようとすると、タイミングによってsの値が上書きされてしまうので非推奨
11    // timer2 = setTimeout(crea, 999);
12    // ↑グローバル変数のtimer2で管理しようとすると、タイミングによってtimer2の値が上書きされてしまうので非推奨
13
14    let td = document.getElementBy(s);
15    td.textContent = "●";
16    let timer3 = setTimeout(function(){
17      td.textContent = "";
18      clearTimeout(timer3);
19    }, 1000);
20    // ↑このようにすれば変数の汚染などは最小限にとどまる。
21
22}

投稿2018/06/25 01:28

tkturbo

総合スコア5572

tukituki

2018/06/26 04:25

ありがとうございます！おかげで解決できました。 let timer3 = setTimeout(function(){ td.textContent = ""; clearTimeout(timer3); }, 1000); このように、SetTimeoutの中でclearTimeoutができるのがとても勉強になりました！