Wywołaj funkcję po zakończeniu poprzedniej funkcji

Mam następujący kod JavaScript:

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

Jak mogę się upewnić, że function2wywołanie nastąpi dopiero po function1zakończeniu?

Podaj anonimowe wywołanie zwrotne i spraw, aby funkcja1 zaakceptowała je:

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


function function1(param, callback) {
  ...do stuff
  callback();
} 

Jeśli używasz jQuery 1.5, możesz użyć nowego wzorca Deferreds:

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

Edytuj: Zaktualizowany link do bloga:

Rebecca Murphy świetnie napisała na ten temat tutaj: http://rmurphey.com/blog/2010/12/25/deferreds-coming-to-jquery/

Spróbuj tego :

function method1(){
   // some code

}

function method2(){
   // some code
}

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

Ta odpowiedź używa standardowej promisesfunkcji JavaScript ECMAScript 6. Jeśli twoja platforma docelowa nie obsługuje promises, wypełnij ją PromiseJs .

Obietnice to nowy (i znacznie lepszy) sposób obsługi operacji asynchronicznych w JavaScript:

$('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
    });
} 

Może to wydawać się znaczącym narzutem w tym prostym przykładzie, ale w przypadku bardziej złożonego kodu jest to znacznie lepsze niż używanie wywołań zwrotnych. Możesz łatwo łączyć wiele wywołań asynchronicznych za pomocą wielu theninstrukcji:

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

Możesz także łatwo owinąć odroczenia jQuery (które są zwracane z $.ajaxpołączeń):

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

Jak zauważył @charlietfl, jqXHRobiekt zwrócony przez $.ajax()implementuje Promiseinterfejs. Tak więc nie jest konieczne pakowanie go w Promise, można go użyć bezpośrednio:

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

Możesz też wywołać zdarzenie niestandardowe po zakończeniu jednej funkcji, a następnie powiązać ją z dokumentem:

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

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

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

Korzystając z tej metody, funkcja „b” może wykonać tylko PO funkcji „a”, ponieważ wyzwalacz istnieje tylko po zakończeniu wykonywania funkcji a.

możesz to zrobić w ten sposób

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

Zależy to od tego, co robi funkcja 1.

Jeśli funkcja1 wykonuje prosty, zsynchronizowany skrypt javascript, np. Aktualizuje wartość div lub coś takiego, funkcja 2 uruchomi się po zakończeniu funkcji 1.

Jeśli funkcja1 wykonuje wywołanie asynchroniczne, takie jak wywołanie AJAX, musisz utworzyć metodę „wywołania zwrotnego” (większość funkcji API ajax ma parametr funkcji wywołania zwrotnego). Następnie wywołaj funkcję 2 w wywołaniu zwrotnym. na przykład:

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

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

Jeśli metoda 1 musi zostać wykonana po metodzie 2, 3, 4. Poniższy fragment kodu może być rozwiązaniem tego problemu za pomocą Odroczonego obiektu w JavaScript.

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>

Jeśli funkcja1 jest funkcją synchronizacji, którą chcesz przekształcić w funkcję asynchroniczną, ponieważ jej ukończenie zajmuje trochę czasu i nie masz nad nią kontroli, aby dodać wywołanie zwrotne:

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 ();

Dane wyjściowe będą:

Click handled

... i po 2 sekundach:

This is function 1
This is function 2

Działa to, ponieważ wywołanie metody window.setTimeout () doda zadanie do pętli zadań środowiska wykonawczego JS, co wykonuje wywołanie asynchroniczne, oraz ponieważ podstawowa zasada „uruchamiania do zakończenia” środowiska wykonawczego JS zapewnia, że ​​onClick () nigdy nie jest przerywany przed końcem.

Zauważ, że jest to tak zabawne, jak trudny do zrozumienia kod ...