苦学楽学塾 ホームページ
最終更新日：2024年12月29日
JavaScriptで同期処理の方法を考えます。諸所のウェブサイトにPromiseオブジェクトを利用する方法が紹介されているのですが、Promiseオブジェクトが同期をとってくれるわけでもなく、結局setTimeoutメソッドを使うしかないので、それなら、Promiseオブジェクトを使わずにsetTimeoutメソッドとイベント処理のみで同期をとることを考えます。
以下の例では、かなり長い処理時間を要する処理1と、処理1の結果を見て動作すべき処理2と、処理2の結果を見て動作すべき処理3があるとします。
処理1の処理時間は、timeLimit(ミリ秒)という変数で指定します。処理1の結果を待つべき処理2ですが、その処理の都合上、2000ミリ秒経つと、動作開始してしまうとします。処理3も、3200ミリ秒経つと、動作開始してしまうとします。
最初は、同期のない場合で、これは成功するとは限りません、2番目は同期をとり失敗しないようになっています。処理1に要する時間を、処理2開始に間に合うtimeLimit = 1000の場合と、処理2開始に間に合わないtimeLimit = 3000の場合でどうなるかを考えてみます。末尾のリンク先のソース・コードの中の以下のtimeLimitを値を変えて実行してみてください。
<script>
var timeLimit = 1000; // 同期をとらない場合に、1000だと問題ないが、3000だと処理失敗になる
var checkTablet = false;
var completed = false;
var done2 = false;
var timer1, timer2, timer3, timer4, timer5, timer6, timer7;
window.onload = func0;
// 同期のない場合
function func0() {
timer1 = setTimeout(func1, timeLimit);
timer2 = setTimeout(func2, 2000);
timer3 = setTimeout(func3, 3200);
comment("処理1開始");
}
同期のない場合、func0関数において、処理1の終了func1()起動までの時間、処理2の開始func2()起動までの時間、処理3の開始func3()起動までの時間をとるためにsetTimeoutメソッド使い上記の時間を確保し、「処理1開始」と表示します。
function func1() {
comment("処理1終了");
checkTablet = true;
}
function func2() {
if (checkTablet) {
completed = true;
checkTablet = false;
comment("処理2実行");
}
else {
comment("処理2失敗");
}
}
func1()では、「処理1終了」を表示し、checkTabletフラグをtrueにします。func2()では、処理1の完了をチェックするために、checkTabletフラグをチェックします。処理1が完了しcheckTabletフラグがtrueであれば、処理2に進み、completedフラグをtrueにして「処理2実行」と表示します。処理1が完了しておらずcheckTabletフラグがfalseである場合は、処理2を実行できないので、「処理2失敗」と表示します。completedフラグはfalseのままです。
function func3() {
if (completed) {
comment("処理3実行");
completed = false;
comment("成功裡に処理終了");
}
else {
comment("処理3失敗");
}
clearTimeout(timer1);
clearTimeout(timer2);
clearTimeout(timer3);
comment("ここで1秒待機して第2ステージへ")
timer4 = setTimeout(func10, 1000);
}
func3()では、処理2の完了をチェックするために、completedフラグをチェックします。completedフラグがtrueであれば、「処理3実行」と表示し、処理3実行で全ての処理を完了するので、「成功裡に処理終了」と表示します。処理2が実行されておらずcompletedフラグがfalseの場合には、処理3を行うことができないので「処理3失敗」と表示します。
上記で、timeLimit = 1000として動作させると、処理1完了後に処理2が開始、処理2が完了後に処理3が始まるので、処理3まで動作完了し、ブラウザ画面に以下のように表示します。
JavaScriptのテストをします。
処理1開始
処理1終了
処理2実行
処理3実行
成功裡に処理終了
同期をとっていないので、上記で、timeLimit = 3000 (処理1の動作時間が長い)として動作させると、処理1が完了していないのに処理2が始まってしまい、処理2，処理3に失敗して、ブラウザ画面に、以下のように表示します。
JavaScriptのテストをします。
処理1開始
処理2失敗
処理1終了
処理3失敗
この後、第2ステージに進むので、「ここで1秒待機して第2ステージへ」と表示し、setTimeoutメソッドを利用して、同期をとる場合のfunc10()に進みます。timeLimitの値は、同期を取らない場合と同じです。
// 上記をイベントで同期する場合
function func10() {
checkTablet = false;
completed = false;
timer5 = setTimeout(func11, timeLimit); // func11の実行時間：timeLimit msec
timer6 = setTimeout(func12, 2000); // 2000msec後では、処理1が完了していない
comment("処理1開始");
window.onload = func12;
}
func10()では、処理1の完了となるfunc11()起動までの時間と、処理2の開始となるfunc12()までの時間を確保するために、setTimeoutメソッドを使います。「処理1開始」と表示し、window.onloadプロパティにfunc12を設定します。これで、'load'イベント発生でfunc12()が起動します。
function func11() { // 処理1の完了
checkTablet = true;
comment("処理1完了");
var ev1 = new Event('load');
window.dispatchEvent(ev1);
}
処理1完了のfunc11()では、処理1完了を示すために、checkTabletフラグをtrueとし、「処理1完了」と表示、さらに、Eventオブジェクトのコンストラクタを使って'load'イベントのev1を生成し、dispatchEventメソッド(EventTargetオブジェクトのメソッドですが、window，document，一般elementをEventTargetオブジェクトと見ることができます)により、'load'イベントを発生させます。
function func12() {
if (checkTablet) {
checkTablet = false;
if (done2) {
comment("処理2は既に完了しているので処理しない");
}
else {
comment("処理2開始");
timer7 = setTimeout(func122, 500); // func12の実行時間：500msec
window.onload = func13;
}
done2 = false;
}
else {
comment("処理2失敗");
}
}
処理2の開始であるfunc12()では、処理1完了をチェックするためにcheckTabletフラグを調べ、これがtrueなら「処理2開始」と表示して、処理2の終了までの時間500ミリ秒をsetTimeoutメソッドを利用して確保し、処理2の完了であるfunc122()を起動するようにしています。また、window.onloadプロパティにfunc13を設定します。これで、'load'イベントでfunc13()が起動します。checkTabletフラグがfalseのときは「処理2失敗」と表示します。
但し、ここでは、setTimeoutから呼ばれる場合と、'load'イベントから呼ばれる場合があり、処理1が完了していないうちに呼ばれた場合には、「処理2失敗」と表示されます。また、既に処理2が完了しているのに、func12()が呼ばれることもあり得るので、二重に処理2が動かないように、一度、処理2が動くとdone2フラグをtrueにして、done2フラグがtrueの場合には、二度目の処理2が起動しないようにしています。
function func122() { // 処理2完了
completed = true;
done2 = true;
comment("処理2完了");
var ev2 = new Event('load');
window.dispatchEvent(ev2);
}
function func13() {
if (completed) {
comment("処理3実行");
}
else {
comment("処理3失敗");
throw new Error("処理失敗");
}
completed = false;
clearTimeout(timer4);
clearTimeout(timer5);
clearTimeout(timer6);
clearTimeout(timer7);
comment("成功裡に処理終了");
throw new Error("中途停止");
}
処理2の完了であるfunc122()では、completedフラグをtrue，done2フラグをtrueにして「処理2完了」と表示します。また、ここでも、dispatchEventメソッドにより、'load'イベントを発生させ、処理3のfunc13()が起動します。func13()が起動するときには、処理2は完了しており、completedフラグは必ずtrueで「処理3実行」と表示します。func13()に来るのは、処理2完了のfunc122()の中で発生する'load'イベントによって来る場合のみで、処理3が失敗することはないのですが、処理失敗の場合も想定しています。
timeLimit = 1000として動作させる場合、同期を取らない場合でも成功しますが、同期を取る第2ステージでも、画面に以下のように表示して成功します。
処理1開始
処理1完了
処理2開始
処理2完了
処理3実行
成功裡に処理終了
timeLimit = 3000として動作せる場合、処理1完了前に処理2が始まってしまうので、同期を取らない場合には失敗してしまいますが、同期を取る場合には、一度処理2が失敗しても、処理1完了でイベントを発生させて処理2を再起動するので処理2が成功し、処理3も成功して、一連の処理は成功裡に終了し、以下のように画面に表示されます。
処理1開始
処理2失敗
処理1完了
処理2開始
処理2完了
処理3実行
成功裡に処理終了
同期をとらない場合には失敗する可能性があっても、同期をとれば、処理1，処理2，処理3の一連の処理は、必ず成功します。
スクリプトはここで終わりで、この後に、
</style>
が付きます。
以上のJavaScriptプログラムは、こちら。Google Chromeで表示させて、[F12]キーを押して、ソースをクリックしてみてください。表示に使っているcomment()関数は、HTMLソース・コードを見てください(JavaScriptのデバグを参照)。
【広告】 ここから広告です。ご覧の皆さまのご支援ご理解を賜りたく、よろしくお願いいたします。
【広告】 広告はここまでです。