UIレスポンス

jQueryは使いやすいが、それでも結局JavaScriptでまともなUIを構築できる気がしない。

入力フィールドに入力して実行ボタンを押すと、サーバからデータをJSON形式で取得して画面に結果を表示する。というだけのプログラムを作った。
データを返すのに時間がかかるので、画面に"Wait a moment..."と表示するようにしておいた。サーバとの通信は非同期にする必要も無いので同期にした。

$('#message').text('Wait a moment...');
jQuery.ajax({
    async: false,
    type: 'POST',
    dataType: 'json',
    url: './xxx',
    ....

Firefoxでテストして問題ないのでデプロイして完成のつもりでいた。
しかしChromeとIEで実行してみて、これでは駄目だとわかった。
"Wait a moment..."と表示されない。本当は表示しているのだろうが、通信が終了して結果を表示する直前のタイミングで表示しているために見えないらしい。
通信中に表示してくれないとマウスカーソルも含めて画面上に何の変化もないので、ユーザにはハングアップしたようにしか見えない。
通信を非同期に変更すればまともなタイミングで表示されるので、そのように変更した。このプログラムの場合はUIが単純なので、非同期に変更しても通信中に実行ボタンをdisableにするだけで済むが、簡単にいかないケースがあると思う。

前にも似たようなことで困ったことがあった。JavaScriptの処理に数秒の時間が掛かるプログラムで、そのときは画面にメッセージを表示する方法ではなく、マウスカーソルを砂時計に変更して処理中であることを表現しようとした。しかしこれもカーソルの表示が変わるタイミングがブラウザ依存で、使い物に成らなかった。