人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

}

●質問者: kajironpu
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

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

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

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

2 ● POGPI

setTimeout(hoge(),1000);

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


kajironpuさんのコメント
ありがとうございます。 setTimeout(hoge(),1000); この1行だけでいいのでしょうか? hogeをstart() にしました。(最初の戻る) 試してみたところ変化ないのですが、、、

POGPIさんのコメント
setTimeout("hoge()",1000); でした。すみません間違えました。

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

3 ● a-kuma3
ベストアンサー

次の処理に移るまで単純に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


kajironpuさんのコメント
ありがとうございます。とても参考になります。 うまくいきました! ありがとうございました。m(__)m
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ