読者です 読者をやめる 読者になる 読者になる

prototype.jsのAjax.Request()について

prototype.jsAjax.Request()を使うときにオプションでonLoadingというのがある。
名前からしてもローディング中に行う関数を渡すオプションなんだろうけど、なぜかうまく動かない。
どうやってもonCompleteで渡した関数が先に呼ばれてしまう。

例えば
 

 onLoadFunc : function(httpObj) {
     $('dataArea').innerHTML = "Loading...";
    }
 completeFunc : function(httpObj) {
     $('dataArea').innerHTML = "Complete!!";
    }

 var target = "http://locahost/test/"
 new Ajax.Request(target, {
  method: "get",
  onLoading : onLoadFunc
  onComplete : completeFunc
 });

 
とすると画面にはLoading...が表示された後にComplete!!が表示されるだろうと思った。
しかし何度やっても表示されるのはLoading...になってしまう。
※ちなみにhttp://locahost/test/はローカルにapacheをインストールして動かしている。


prototype.jsのソースを見ると1037行目に

 if (this.options.asynchronous)
  setTimeout(function() { this.respondToReadyState(1) }.bind(this), 10);

という記述がある。


なぜか10ミリ秒遅らせてからonLoading()を実行するようにsetTimeout()をしている。。。
つまり10ミリ秒以内にレスポンスがあった場合はcompleteFunc()が先に実行されてしまうのです。
なぜ遅らせているのかわかりませんが、とりあえずonLoadingは使わないように修正。

 completeFunc : function(httpObj) {
     $('dataArea').innerHTML = "Complete!!";
    }
 $('dataArea').innerHTML = "Loading...";  //←リクエストを投げる前にLoading...を表示させちゃう
 var target = "http://locahost/test/"
 new Ajax.Request(target, {
  method: "get",
  onComplete : completeFunc
 });

 

まぁ無理やりonLoadingを使う必要もないし。