Jeg har følgende JavaScript-kode:
$('a.button').click(function(){
if (condition == 'true'){
function1(someVariable);
function2(someOtherVariable);
}
else {
doThis(someVariable);
}
});
Hvordan kan jeg sikre at funksjon2
bare kalles etter at funksjon1
er fullført?
Angi en anonym tilbakeringing, og få funksjon1 til å godta den:
$('a.button').click(function(){
if (condition == 'true'){
function1(someVariable, function() {
function2(someOtherVariable);
});
}
else {
doThis(someVariable);
}
});
function function1(param, callback) {
...do stuff
callback();
}
Hvis du bruker jQuery 1.5, kan du bruke det nye Deferreds-mønsteret:
$('a.button').click(function(){
if(condition == 'true'){
$.when(function1()).then(function2());
}
else {
doThis(someVariable);
}
});
Edit: Oppdatert blogglink:
Rebecca Murphy hadde en flott artikkel om dette her: http://rmurphey.com/blog/2010/12/25/deferreds-coming-to-jquery/
Dette avhenger av hva funksjonen1 gjør.
Hvis funksjon1 gjør noe enkelt synkronisert javascript, som å oppdatere en div-verdi eller noe, vil funksjon2 avfyres etter at funksjon1 er fullført.
Hvis funksjon1 gjør et asynkront anrop, for eksempel et AJAX-anrop, må du opprette en "callback"-metode (de fleste ajax API-er har en callback-funksjonsparameter). Deretter kaller du funksjon2 i tilbakeringingen. f.eks:
function1()
{
new AjaxCall(ajaxOptions, MyCallback);
}
function MyCallback(result)
{
function2(result);
}