javascript で wait() をさせたい

質問

無限ループを使用せずに、次のような作業を、プログラムした順に行なう方法がわかりません。

function test(id) {
writeX("1", "a1") ;
wait(3000) ;
writeX("3", "a3") ;
writeX("4", "a4") ;
writeX("5", "a5") ;
writeX("6", "a6") ;
}

function writeX(x, id)
{
document.getElementById(id).value = x ;
}

function wait(t) {
setTimeout( function() { writeX("waited", "a2") }, t ) ;
}

---------------
<input type= "text" id= "a1" ></input><br>
<input type= "text" id= "a2" ></input><br>
<input type= "text" id= "a3" ></input><br>
<input type= "text" id= "a4" ></input><br>
<input type= "text" id= "a5" ></input><br>
<input type= "text" id= "a6" ></input><br>

<button onclick="test()" > Test </button>

*********

どのような方法で、wait() が終わるまで次の処理を待たせることができるか教えて下さい。

よろしくお願いします。

回答No.2

b0a0a · ベストアンサー

まず、wait()はwhileを使ったビジーループなどで実現することもできますが、けしてしてはいけません。
何故かと言うと、例えばブラウザ上のJSが処理を止めるということは、
イベントループが回らなくなり、ブラウザも固まるということだからです。

ですのでまず、コールバックを覚えましょう。
たとえばsetTimeoutを使うと、指定した時間後に関数を呼ぶことができます。
これを使って以下のように書けます。

function test(id) {
　writeX("1", "a1") ;
　setTimeout( function(){
　　writeX("3", "a3") ;
　　writeX("4", "a4") ;
　　writeX("5", "a5") ;
　　writeX("6", "a6") ;
　}, 3000) ;
}

これがJSに置ける基本的な非同期処理のやり方です。
１年くらいやってJSに慣れたら、Promiseやジェネレータ、asyc-awaitも覚えてください。
そうすれば最初の理想に近いこういう風にかけるようにもなります。

async function test(id) {
　writeX("1", "a1") ;
　await timeout(3000) ;
　writeX("3", "a3") ;
　writeX("4", "a4") ;
　writeX("5", "a5") ;
　writeX("6", "a6") ;
}

お礼

貴重な情報をお教えいただきありがとうございました。
次世代のコマンドの知識をお持ちということで、
どのような形で開発中の専門的内容をお知りになられたか
参考までにご指導いただければ幸いです。

回答No.1

t_ohta

JavaScriptは非同期でどんどん処理が進むので、setTimeout() で処理を遅らせるのであれば、その処理以降のプログラムは全部 setTimeout() の中に書いてやる必要があります。

function test(id) {
writeX("1", "a1");
wait(3000, function(){
writeX("waited", "a2");
writeX("3", "a3");
writeX("4", "a4");
writeX("5", "a5");
writeX("6", "a6");
});
}

function writeX(x, id)
{
document.getElementById(id).value = x ;
}

function wait(t, fnc) {
setTimeout( function() { fnc(); }, t ) ;
}