【JS】前の行の処理を完了してから次の行の処理を行いたい

やりたいこと

 JavaScriptで処理Aが完了してから処理Bを実行したい。

 たとえばPHPなどの場合、前の行で関数Aを呼び出したとすると、次の行が実行されるのは関数Aの戻り値が来た後になります(関数Aに戻り値がある場合)。しかしながらJavaScriptの場合、サイトの表示などに使われる関係で、表示速度を速めるために、前の行の処理の完了を待たずにその後の行を実行します。

 すると、たとえば先述のように、関数Aの戻り値が来た後に次の処理を実行したい場合は、少し工夫をしなければなりません。その方法を今回は解説したいと思います。

サンプルコード提示・解説

 上のコードのように、setIntervalを使うと処理A完了後に処理Bを実行するということが実現できます。

 具体的に何をしているかといいますと、setIntervalの第2引数に指定する時間毎に、処理Aが完了しているかどうかを確かめて、処理Aが完了していたら処理Bを実行せよ、というようなコードになっています。