以下のようなJavaScriptのコードがあります。
$('a.button').click(function(){
if (condition == 'true'){
function1(someVariable);
function2(someOtherVariable);
}
else {
doThis(someVariable);
}
});
function1」が完了した後に「function2」が呼び出されるようにするにはどうしたらいいですか?
無名のコールバックを指定して、function1にそれを受け取らせます。
$('a.button').click(function(){
if (condition == 'true'){
function1(someVariable, function() {
function2(someOtherVariable);
});
}
else {
doThis(someVariable);
}
});
function function1(param, callback) {
...do stuff
callback();
}
jQuery 1.5を使用している場合は、新しいDeferredsパターンを使用することができます。
$('a.button').click(function(){
if(condition == 'true'){
$.when(function1()).then(function2());
}
else {
doThis(someVariable);
}
});
編集:ブログのリンクを更新しました:。
レベッカ・マーフィーがこの件について素晴らしい記事を書いています: http://rmurphey.com/blog/2010/12/25/deferreds-coming-to-jquery/
これは、function1が何をしているかによります。
もし、function1がdivの値を更新するような単純なシンクロナイズドジャバスクリプトを行っているのであれば、function1が完了した後にfunction2が起動します。
function1がAJAXなどの非同期呼び出しを行っている場合は、"callback"メソッドを作成する必要があります(ほとんどのajax API'sはcallback関数のパラメータを持っています)。そして、コールバックの中でfunction2を呼び出します。
function1()
{
new AjaxCall(ajaxOptions, MyCallback);
}
function MyCallback(result)
{
function2(result);
}