javascriptで、待機時間を入れる方法を教えて下さい。いろいろ調べたのですが、次の処理に移るまで単純に1秒ほど待機するやり方がいまいちよくわかりません。クイズの選択肢を選んで、正解なおかつ、1回めで正解のときだけ、正解音を出しています。そして、正解のボタンに色などをつけて、そのまま、start()に戻る設定にしています。(次の問題に進む)

(すぐ画面が進んでしまうので、音だけなって、正解のボタンの変化がわからない)
ここで、正解のボタンに色などをつけたあと、1秒ほど待機させてから、次の問題へ進ませたいと思っています。いい方法はありますでしょうか?

// 答えがが正しいかどうか判定する
if (tmp == kotae) {
if (missflag==0){
//1回めで、正解した時だけ、正解の音を出す。2回めであたったときは音はださない。
audio = new Audio();
audio.src = "sozai/correct.ogg";
audio.play();
//正解のボタンに色をつける
var buttons = document.getElementsByTagName("button");
buttons[kotaelabel].style.backgroundColor = "#FFBEDA";//ボタンの背景
buttons[kotaelabel].style.color = "#FF0000";//文字の色
buttons[kotaelabel].style.fontWeight="bold"
buttons[kotaelabel].style.background = "url(sozai/b.jpg) #A4C6FF left/80px no-repeat";
missflag =0

}

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2015/09/10 11:01:10
  • 終了:2015/09/17 11:05:05

ベストアンサー

id:a-kuma3 No.3

a-kuma3回答回数4523ベストアンサー獲得回数18802015/09/10 17:05:27

次の処理に移るまで単純に1秒ほど待機するやり方

他の言語だと sleep というような名前の API やコマンドで実装されている「単純に待つ」というのは、javascript ではありません。
指定時間後に処理を実行する window.setTimeout を使って実装します。

1秒後に start() を呼べば良いんですか?
こんな感じです。ボタンに色をつける処理の後に 4行ほど追加してます。

// 答えがが正しいかどうか判定する
if (tmp == kotae) {
    if (missflag==0){
        //1回めで、正解した時だけ、正解の音を出す。2回めであたったときは音はださない。
        audio = new Audio();
        audio.src = "sozai/correct.ogg";
        audio.play();
        //正解のボタンに色をつける
        var buttons = document.getElementsByTagName("button");
        buttons[kotaelabel].style.backgroundColor = "#FFBEDA";//ボタンの背景
        buttons[kotaelabel].style.color = "#FF0000";//文字の色
        buttons[kotaelabel].style.fontWeight="bold"
        buttons[kotaelabel].style.background = "url(sozai/b.jpg) #A4C6FF left/80px no-repeat";
        missflag =0

        // ★ここから
        window.setTimeout(function() {
            // 次の問題に進む
            start();
        }, 1000);
        // ★ここまで
    }
}

No.2 の回答にあるような流儀で書くなら、第一引数を文字列にしなくちゃいけません。

    window.setTimeout("start()", 1000);

もしくは、関数 start が引数なしで呼び出せるなら、括弧をつけずにこうです。

    window.setTimeout(start, 1000);

No.2 の回答の書き方だと、start 関数を呼び出して、その戻り値を setTimeout の第一引数にセットして 1秒後に第一引数の内容を実行する、という動作になります。
setTimeout() を呼ぶ前に、start() が呼ばれますから、待たずにすぐ次の問題へと画面が移ります。


(参考)window.setTimeout - Web API インターフェイス | MDN

id:kajironpu

ありがとうございます。とても参考になります。
うまくいきました!
ありがとうございました。m(__)m

2015/09/10 18:03:54

その他の回答(2件)

id:kagasu No.1

kagasu回答回数5ベストアンサー獲得回数12015/09/10 11:14:01

var huga = 0;
var hoge = setInterval(function() {
    huga++;

    if (huga == 1) {
        clearInterval(hoge);
        alert("1秒経過しました。");
    }
}, 1000);
id:kajironpu

ありがとうございます。
試してみましたが、次の画面に進んでしまったあとに、1秒経過しました。
と表示されてしまうようです。

2015/09/10 12:00:42
id:pogpi No.2

POGPI回答回数377ベストアンサー獲得回数502015/09/10 16:04:44

setTimeout(hoge(),1000);

で、どうですか、hogeは次の処理です。

他1件のコメントを見る
id:pogpi

setTimeout("hoge()",1000);

でした。すみません間違えました。

2015/09/10 17:20:08
id:kajironpu

ありがとうございます!!
こんなシンプルなやり方があったのですね。びっくりです。
ありがとうございます。m(__)m

2015/09/10 18:00:42
id:a-kuma3 No.3

a-kuma3回答回数4523ベストアンサー獲得回数18802015/09/10 17:05:27ここでベストアンサー

次の処理に移るまで単純に1秒ほど待機するやり方

他の言語だと sleep というような名前の API やコマンドで実装されている「単純に待つ」というのは、javascript ではありません。
指定時間後に処理を実行する window.setTimeout を使って実装します。

1秒後に start() を呼べば良いんですか?
こんな感じです。ボタンに色をつける処理の後に 4行ほど追加してます。

// 答えがが正しいかどうか判定する
if (tmp == kotae) {
    if (missflag==0){
        //1回めで、正解した時だけ、正解の音を出す。2回めであたったときは音はださない。
        audio = new Audio();
        audio.src = "sozai/correct.ogg";
        audio.play();
        //正解のボタンに色をつける
        var buttons = document.getElementsByTagName("button");
        buttons[kotaelabel].style.backgroundColor = "#FFBEDA";//ボタンの背景
        buttons[kotaelabel].style.color = "#FF0000";//文字の色
        buttons[kotaelabel].style.fontWeight="bold"
        buttons[kotaelabel].style.background = "url(sozai/b.jpg) #A4C6FF left/80px no-repeat";
        missflag =0

        // ★ここから
        window.setTimeout(function() {
            // 次の問題に進む
            start();
        }, 1000);
        // ★ここまで
    }
}

No.2 の回答にあるような流儀で書くなら、第一引数を文字列にしなくちゃいけません。

    window.setTimeout("start()", 1000);

もしくは、関数 start が引数なしで呼び出せるなら、括弧をつけずにこうです。

    window.setTimeout(start, 1000);

No.2 の回答の書き方だと、start 関数を呼び出して、その戻り値を setTimeout の第一引数にセットして 1秒後に第一引数の内容を実行する、という動作になります。
setTimeout() を呼ぶ前に、start() が呼ばれますから、待たずにすぐ次の問題へと画面が移ります。


(参考)window.setTimeout - Web API インターフェイス | MDN

id:kajironpu

ありがとうございます。とても参考になります。
うまくいきました!
ありがとうございました。m(__)m

2015/09/10 18:03:54

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません