WSJSの使い方、その５（疑似スレッド:EXJS）

JavaScriptはスレッドを持っていない為、処理待ちを行うには複雑な非同期処理を記述しなければなりません。これはアプリケーションの実装において大きな負担となっていました。

WSJSは非同期処理を同期処理の様に記述できる機能を提供しています。この機能を使うと疑似的にスレッドが使えます。

疑似スレッドを使用するには幾つか手順があります。

拡張子を .exjs としたファイルで関数を定義すること。
関数の中で yield 演算子を使用すること。
関数の戻り値に対し next() 関数を呼び出すこと。

実際に動かしてみます。
以下のサンプルコードを d:/test/exjs/ に置きます。

steps.html: <html> <head> <script language="javascript" src="../lib/json2.js"></script> <script language="javascript" src="steps.exjs"></script> <script language="javascript" src="steps.rpjs"></script> </head> <body > <input type="button" value="GO-1" onclick="startSteps('disp1').next()"/> <nobr id="disp1" style="border:2px solid blue;">.</nobr> <br/><br/> <input type="button" value="GO-2" onclick="startSteps('disp2').next()"/> <nobr id="disp2" style="border:2px solid blue;">.</nobr> <br/><br/> <input type="button" value="GO-3" onclick="startSteps('disp3').next()"/> <nobr id="disp3" style="border:2px solid blue;">.</nobr> </body> </html>

steps.exjs: 疑似スレッドとなる関数 function startSteps(id) { var disp = document.getElementById(id); disp.innerHTML = "start"; disp.innerHTML += " > " + yield step1Async(__This); disp.innerHTML += " > " + yield step2Async(__This); disp.innerHTML += " > " + yield step3Async(__This); }

steps.jscp: サーバ側で時間のかかる関数 function step1() { java.lang.Thread.sleep(3000); return "step1"; } function step2() { java.lang.Thread.sleep(3000); return "step2"; } function step3() { java.lang.Thread.sleep(3000); return "done"; }

http://localhost:8080/wsjs/exjs/steps.html にアクセスします。
「GO-1」をクリックしてスレッドを開始します。「GO-3」,「GO-2」をクリックして各々のスレッドを開始します。各々のスレッドは独立して進行していきます。最終的に全てのスレッドが完了します。