javelover回答ポイントなし

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

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

// 答えがが正しいかどうか判定する
if (tmp == kotae) {
if (missflag==0){
//１回めで、正解した時だけ、正解の音を出す。２回めであたったときは音はださない。
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

}

ログインして回答する

ベストアンサー

a-kuma32015/09/10 17:05:27
次の処理に移るまで単純に１秒ほど待機するやり方
他の言語だと sleep というような名前の API やコマンドで実装されている「単純に待つ」というのは、javascript ではありません。
指定時間後に処理を実行する window.setTimeout を使って実装します。

1秒後に start() を呼べば良いんですか？
こんな感じです。ボタンに色をつける処理の後に 4行ほど追加してます。
```
// 答えがが正しいかどうか判定する
if (tmp == kotae) {
    if (missflag==0){
        //１回めで、正解した時だけ、正解の音を出す。２回めであたったときは音はださない。
        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
スター
- 1件のコメントを見る
- javelover 2015/09/10 18:03:54
  
  ありがとうございます。とても参考になります。
  うまくいきました！
  ありがとうございました。m(__)m
  
  スター

その他の回答

kagasu2015/09/10 11:14:01
```
var huga = 0;
var hoge = setInterval(function() {
    huga++;

    if (huga == 1) {
        clearInterval(hoge);
        alert("1秒経過しました。");
    }
}, 1000);
```
スター
- 1件のコメントを見る
- javelover 2015/09/10 12:00:42
  
  ありがとうございます。
  試してみましたが、次の画面に進んでしまったあとに、1秒経過しました。
  と表示されてしまうようです。
  
  スター

その他の回答を読む

この質問へのコメント

コメントはありません

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

質問の情報

登録日時: 2015-09-10 11:01:10
終了日時: 2015-09-17 11:05:05
回答条件: 1人5回まで

この質問のカテゴリ

ウェブ制作

ベストアンサー

a-kuma32015/09/10 17:05:27

javelover 2015/09/10 18:03:54

その他の回答

kagasu2015/09/10 11:14:01

javelover 2015/09/10 12:00:42

POGPI2015/09/10 16:04:44

javelover 2015/09/10 16:46:40

POGPI 2015/09/10 17:20:08

javelover 2015/09/10 18:00:42

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版