prototype.jsのAjax.Request()について
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を使う必要もないし。