Önceki işlev tamamlandıktan sonra bir işlevi çağırma

Aşağıdaki JavaScript koduna sahibim:

$('a.button').click(function(){
    if (condition == 'true'){
        function1(someVariable);
        function2(someOtherVariable);
    }
    else {
        doThis(someVariable);
    }
});

function2Sadece aramanın function1tamamlanmasının ardından nasıl çağrılabilirim ?

Anonim bir geri arama belirtin ve işlev1'in kabul etmesini sağlayın:

$('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 kullanıyorsanız, yeni Ertelenmişler desenini kullanabilirsiniz:

$('a.button').click(function(){
    if(condition == 'true'){
        $.when(function1()).then(function2());
    }
    else {
        doThis(someVariable);
    }
});

Düzenle: Güncellenmiş blog bağlantısı:

Rebecca Murphy burada harika bir yazı yazdı: http://rmurphey.com/blog/2010/12/25/deferreds-coming-to-jquery/

Bunu dene :

function method1(){
   // some code

}

function method2(){
   // some code
}

$.ajax({
   url:method1(),
   success:function(){
   method2();
}
})

Bu cevap promises, ECMAScript 6standardın JavaScript özelliğini kullanır . Hedef platformunuz desteklemiyorsapromises PromiseJs ile çoklu doldurun .

Vaatler, JavaScript'te eşzamansız işlemleri gerçekleştirmenin yeni (ve çok daha iyi) bir yoludur:

$('a.button').click(function(){
    if (condition == 'true'){
        function1(someVariable).then(function() {
            //this function is executed after function1
            function2(someOtherVariable);
        });
    }
    else {
        doThis(someVariable);
    }
});


function function1(param, callback) {
    return new Promise(function (fulfill, reject){
        //do stuff
        fulfill(result); //if the action succeeded
        reject(error); //if the action did not succeed
    });
} 

Bu, bu basit örnek için önemli bir ek yük gibi görünebilir, ancak daha karmaşık kodlar için geri arama kullanmaktan çok daha iyidir. Birden çok thenifadeyi kullanarak birden çok eşzamansız çağrıyı kolayca zincirleyebilirsiniz :

function1(someVariable).then(function() {
    function2(someOtherVariable);
}).then(function() {
    function3();
});

Ayrıca jQuery ertelemelerini kolayca ( $.ajaxaramalardan döndürülen ) sarabilirsiniz :

Promise.resolve($.ajax(...params...)).then(function(result) {
    //whatever you want to do after the request
});

@Charlietfl'in belirttiği gibi, jqXHRdöndürülen nesne arabirimi $.ajax()uygular Promise. Bu yüzden bir a sarmak gerekli değildir Promise, doğrudan kullanılabilir:

$.ajax(...params...).then(function(result) {
    //whatever you want to do after the request
});

Veya bir işlev tamamlandığında özel bir etkinliği tetikleyebilir, ardından bunu belgeye bağlayabilirsiniz:

function a() {
    // first function code here
    $(document).trigger('function_a_complete');
}

function b() {
    // second function code here
}

$(document).bind('function_a_complete', b);

Bu yöntemi kullanarak, 'b' işlevi yalnızca 'a' işlevinden SONRA yürütebilir, çünkü tetikleyici yalnızca işlev a yürütme tamamlandığında vardır.

böyle yapabilirsin

$.when(funtion1()).then(function(){
    funtion2();
})

Bu, function1'in ne yaptığına bağlıdır.

Function1, div değerini veya başka bir şeyi güncellemek gibi basit bir senkronize javascript yapıyorsa, function1 tamamlandıktan sonra function2 tetiklenir.

Function1, AJAX çağrısı gibi eşzamansız bir çağrı yapıyorsa, bir "geri çağrı" yöntemi oluşturmanız gerekir (ajax API'lerinin çoğunda geri çağrı işlevi parametresi bulunur). Ardından geri aramada function2'yi çağırın. Örneğin:

function1()
{
  new AjaxCall(ajaxOptions, MyCallback);
}

function MyCallback(result)
{
  function2(result);
}

Yöntem 1, yöntem 2, 3, 4'ten sonra yürütülecekse, aşağıdaki kod snippet'i JavaScript'te Ertelenmiş nesne kullanılarak çözüm olabilir.

function method1(){
  var dfd = new $.Deferred();
     setTimeout(function(){
     console.log("Inside Method - 1"); 
     method2(dfd);	 
    }, 5000);
  return dfd.promise();
}

function method2(dfd){
  setTimeout(function(){
   console.log("Inside Method - 2"); 
   method3(dfd);	
  }, 3000);
}

function method3(dfd){
  setTimeout(function(){
   console.log("Inside Method - 3"); 	
   dfd.resolve();
  }, 3000);
}

function method4(){   
   console.log("Inside Method - 4"); 	
}

var call = method1();

$.when(call).then(function(cb){
  method4();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Function1, zaman uyumsuz bir işleve dönüştürmek istediğiniz bazı senkronizasyon işleviyse, tamamlanması biraz zaman alır ve geri arama eklemek için üzerinde kontrolünüz olmaz:

function function1 (someVariable) {
    var date = Date.now ();
    while (Date.now () - date < 2000);      // function1 takes some time to complete
    console.log (someVariable);
}
function function2 (someVariable) {
    console.log (someVariable);
}
function onClick () {
    window.setTimeout (() => { function1 ("This is function1"); }, 0);
    window.setTimeout (() => { function2 ("This is function2"); }, 0);
    console.log ("Click handled");  // To show that the function will return before both functions are executed
}
onClick ();

Çıktı şöyle olacaktır:

Click handled

... ve 2 saniye sonra:

This is function 1
This is function 2

Bunun nedeni, window.setTimeout () öğesinin çağrılmasının, zaman uyumsuz çağrının yaptığı JS runtine görev döngüsüne bir görev ekleyeceği ve JS çalışma zamanının "çalışma-tamamlama" temel ilkesinin onClick () sona ermeden asla kesilmez.

Kodun anlaşılması zor olabileceği kadar komik olduğuna dikkat edin ...