(すぐ画面が進んでしまうので、音だけなって、正解のボタンの変化がわからない)
ここで、正解のボタンに色などをつけたあと、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秒ほど待機するやり方
他の言語だと 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
var huga = 0; var hoge = setInterval(function() { huga++; if (huga == 1) { clearInterval(hoge); alert("1秒経過しました。"); } }, 1000);
ありがとうございます。
試してみましたが、次の画面に進んでしまったあとに、1秒経過しました。
と表示されてしまうようです。
setTimeout(hoge(),1000);
で、どうですか、hogeは次の処理です。
setTimeout("hoge()",1000);
でした。すみません間違えました。
ありがとうございます!!
こんなシンプルなやり方があったのですね。びっくりです。
ありがとうございます。m(__)m
次の処理に移るまで単純に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
ありがとうございます。とても参考になります。
うまくいきました!
ありがとうございました。m(__)m
ありがとうございます。とても参考になります。
2015/09/10 18:03:54うまくいきました!
ありがとうございました。m(__)m