Flicker’s Style++

prototype.jsのAjax.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を使う必要もないし。