一定時間が経過したら特定の処理を実行したいのですが（JavaScript）

前提・実現したいこと

JavaScriptでおみくじアプリを作成しています。
「？」ボタンをクリックしていくと大吉中吉小吉と表示されるのですが、このたび以下の機能を追加することになりました。

【したいこと。】
・10秒間クリックしなかったら元の画面「？」に戻る
・クリックしたらおみくじがひける
・また10秒間クリックしなかったら元の画面「？」に戻る

タイマー処理など調べているのですが、分からなくなり質問させていただきます。

該当のソースコード

#【JavaScript】
'use strict'; //厳格モードへの移行

{
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {

    const n = Math.random();
    if (n <0.05) {
        btn.textContent = '大吉';
    } else if (n < 0.2) {
        btn.textContent = '中吉';
    } else {
        btn.textContent = '小吉';
    }
});

}

#【html】

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>おみくじ</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div id="btn">?</div> <script src="js/main.js"></script> </body> </html>

補足

タイマー処理やif文など調べてみたのですが、よく分からずこちらで質問させていただきます。
以上、よろしくお願いいたします。

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

回答2件

ベストアンサー

setTimeout() を使うのがいいと思います。
WindowOrWorkerGlobalScope.setTimeout() - Web API | MDN

投稿2021/10/01 04:36

Lhankor_Mhy

総合スコア36981

K78902667

2021/10/01 04:40

そうですよね、ありがとうございます。一応下記のサイトを参考にしているのですが、そもそもどんな風にコードを書けばいいのかも勉強中で理解していないのでこちらに質問させていただきました。 URLまで教えていただきありがとうございます。参考にします。 https://gray-code.com/javascript/execute-processing-after-a-certain-pariod-of-time/

Lhankor_Mhy

2021/10/01 04:43

setTimeout(function(){btn.textContent = '?';},10000) とすれば、10秒後に?に戻ります。

K78902667

2021/10/01 04:59

ありがとうございます！ const btn = document.getElementById('btn'); btn.addEventListener('click', () => { //const results = ['大吉', '中吉', '小吉', '末吉']; /* const results = ['大吉', '大吉', '大吉', '末吉']; btn.textContent = results[Math.floor(Math.random() * results.length)]; */ const n = Math.random(); if (n <0.05) { btn.textContent = '大吉'; } else if (n < 0.2) { btn.textContent = '中吉'; } else { btn.textContent = '小吉'; } setTimeout(function(){btn.textContent = '?';},10000) }); こう表記することで、クリックして10秒後には？に戻る、が繰り返せるんですね。なぜか「？」用に新しいページを作ってページ遷移しなきゃとまで考えていたので、シンプルな回答に本当に感動しました。ありがとうございます。

Lhankor_Mhy

2021/10/01 05:01

お役に立てたようで何よりですたぶん、そのコードだけでは、連打した時に想定している動作と違うことが起きると思います。いろいろ検証してみてください。

Lhankor_Mhy

2021/10/01 06:05

suwmn50799 さんのご回答が、上記の問題に対する解決方法です。

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

BA決定後に失礼します。

setTimeout を使うときは、対になる関数clearTimeoutもどこかで適切に使わないといけない、と覚えておくとよいかもしれません。

たとえば以下のようにコードを追加します。

diff
1 'use strict'; //厳格モードへの移行
2
3 {
4   const btn = document.getElementById('btn');
5+  let timeoutID = -1;  // マイナスの数で初期化しておく
6 
7   btn.addEventListener('click', () => {
8+    if (timeoutID > 0) clearTimeout(timeoutID);  // 現在動いているタイマーを止める
9     const n = Math.random();
10     if (n <0.05) {
11       btn.textContent = '大吉';
12@@ -12,6 +14,6 @@
13     } else {
14       btn.textContent = '小吉';
15     }
16-    setTimeout(function(){btn.textContent = '?';},10000);
17+    timeoutID = setTimeout(function(){btn.textContent = '?';},10000);　　　// timeoutID には正の整数値が入る。
18   });
19 }
20

投稿2021/10/01 05:56

退会済みユーザー

総合スコア0

K78902667

2021/10/01 13:51 編集

『対になる関数がある』ということすら全く頭にない状態なので、教えていただけて嬉しいです。分かりやすい解説も付けていただいて、勉強になります。ありがとうございます！ [@@ -12,6 +14,6 @@] この部分は中吉部分を略しているという意味でしょうか？調べてみると出てこなかったので、略したという表現かと考えます。

退会済みユーザー

2021/10/01 14:22

> [@@ -12,6 +14,6 @@] 紛らわしいものを残してしまってすみません。Gitというツールがあり、それを使って、コードの修正前と修正後の差分を表示する、git diff というコマンドを行ったときの出力にそういった行が含まれます。意味的には変更した範囲を表します。詳細は、 > … 変更箇所の範囲情報の出力形式を以下に示す: > @@ -R +R @@ > 変更箇所の範囲情報は2つの範囲についての情報を含んでいる。… という説明が以下にあります。 https://ja.wikipedia.org/wiki/Diff#ユニファイド形式_(Unified_format)

K78902667

2021/10/03 03:19

ファイルのバージョン管理が簡単にできるツールなんですね。分かりやすい解説とURLもありがとうございます。すごく便利なツールなので今後使いどころがあれば積極的に使っていこうと思います。本当にありがとうございます。

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

あなたの回答