ワンセットでAjax送信とページForm送信の時、注意しなきゃいけないこと_ブログ_zanmai.net

開発中に、あるボタンを押されたとき、非同期的に二つの処理をさせたいため、一つ目の処理をAjaxで送信させ、二つ目の処理をJSPのアクションを呼びさせた。
僕が書いたソースコードは下記のように

//---------------------------------------------
// ----- 処理１ -----//
//---------------------------------------------
jQuery.ajax({
	async: true,
	type: "GET",
	url: "MyAction!method1.do?sessionId=XXXX",
	cache: false,
	data: {"myParam1":"userId"}
});
//---------------------------------------------
// ----- 処理２ -----//
//---------------------------------------------
execute('MyActiontForm', 'MyAction!method2.do');

何か偶に処理１がカットされた現象を出てしまった。ソースだけを見ると、２つの処理は順番に実行させるはずなのに、・・・・・

原因としては（たぶん）、処理２はFormページのサブミットは結構速くて、処理１のAjaxはまだ準備中の状態に、処理２は先にコミットしたから、処理１はカットされたと思う。

対策はいくつかあると思うけど、ここで例として１つの簡単な対策を挙げます。
それは処理２を実行する前に、sleep時間を空ける。
こんな風に

//---------------------------------------------
// ----- 処理１ -----//
//---------------------------------------------
jQuery.ajax({
	async: true,
	type: "GET",
	url: "MyAction!method1.do?sessionId=XXXX",
	cache: false,
	data: {"myParam1":"userId"}
});
//---------------------------------------------
// ----- 処理２ -----//
//---------------------------------------------
setTimeout(function(){
		execute('MyActiontForm', 'MyAction!method2.do');
	},100);

つまり、処理２を実行する前に、100ミリ秒を待たせる。
これだけで、処理１と処理２を順番に実行できる。

もちろん、ほかの対策は山ことありますが、ここはだけ1つの例です。

本記事の中国語版記事は、姉妹サイトでの「使用jquery.ajax时遇到的请求丢失的问题」へ参考してください。