2012-09-20 14 views
13

Mam 2 wywołania ajax w 2 funkcje różnicowe. Chcę użyć .click, aby wywołać te 2 funkcje . Func1 wstawia dane do bazy danych, następnie func2 pobiera dane, więc moim pytaniem jest, jak poczekać, aż func1 będzie w pełni kompletny, a następnie wykona tylko func2.Jquery kontynuuje inną funkcję ajax po pierwszym wywołaniu funkcji ajax jest w pełni kompletne

Próbowałem .delay(), działa, ale myślę, że to jest głupie rozwiązanie.

$("#updateLocation").click(function(e){ 
     e.preventdefault; 
     func1(); 
     func2(); 
     }); 
     return false; 
    }); 

    function func1(){ 
     $.ajax({ 
     url:'', 
     }); 
}); 

    function func2(){ 
     $.ajax({ 
     url:'', 
     }); 
}); 

Odpowiedz

23

trzy sposoby:

połączeń func2 na sukces func1:

function func1() { 
     $.ajax({ ... }).done(func2); 
    } 

Zastosowanie Deferred API zadzwonić func2 gdy ostry ukończył:

e.preventDefault(); 
    $.when(func1).then(func2); 

Producent func1 synchroniczny (nie zalecane):

function func1() { 
     $.ajax({url: '', async: false}); 
    } 
+1

Zawsze uwielbiam tego rodzaju odpowiedź, która z opcjami – vzhen

+0

Jak powiedział @vzhen. Ta metoda jest dobra – iCoders

+0

niewielka różnica masz 2 niezależne wywołania ajax, które chcesz tylko asynchronizować, ale potem chcesz rozpocząć 3., gdy oba zostały zakończone, które powinno być '$ .when (func1, func2) .then (func3);' – MikeT

1

Możesz ustawić opcję "async" na false (dla pierwszego wywołania ajaxowego).

Oznacza to, że funkcja 2 zostanie wywołana po otrzymaniu przez funkcję 1 odpowiedzi, tj. Skończeniu jej wykonania.

function func1(){ 
     $.ajax({ 
     url:'', 
     async: false 
     }); 
}); 
+0

Należy pamiętać, że w ten sposób będzie wstrzymać cały skrypt i spowodować, że „wiszą” aż (obecnie synchroniczne) operacja jest zakończona! –

+0

Uwaga: minęło sporo czasu, odkąd ta odpowiedź i opcja async AJAX: false są teraz przestarzałe. – wondersz1

3

Move func2 wewnątrz func1-> ajax-> sukces zwrotna

$("#updateLocation").click(function(e) { 
    e.preventdefault; 
    func1(); 
    //func2(); 
}); 
return false; 
}); 

function func1() { 
    $.ajax({ 
     url: '', 
     success: function() { /* other stuff */ 
      func2(); 
     } 
    }); 
}); 

function func2() { 
    $.ajax({ 
     url: '', 
    }); 
}); 
2

połączeń fun2 w sukcesie func1

function func1(){ 
    $.ajax({ 
    url:'', 

    success:function(){ 
     func2(); 
    } 
    }) 
4

Ponieważ połączenia Ajax są asynchroniczne, aplikacja nie będzie 'pauza' aż wywołanie ajax jest kompletne i po prostu natychmiast uruchom następne połączenie.

JQuery oferuje handler, który jest wywoływany, gdy połączenie jest udane, a drugi, jeśli wystąpi błąd podczas połączenia.

$.ajax({ 
    url: 'ajax/test.html', 
    success: function(data) { 
    $('.result').html(data); 
    alert('Load was performed.'); 
    }, 
    error :function(jqXHR, textStatus, errorThrown) 
    { 
    alert("something went wrong"); 
    } 
}); 

Będziesz chciał wywołać swoją drugą funkcję AJAX z modułu obsługi sukcesu.

+1

To jest najprostsza forma ...! – Si8

0

można również przekazać swoją funkcję jako parametr jak poniżej:

var secondFunc = function (func) { 

    //Do ajax req or smt 
    func("answer", "params"); 

}; 
var firstFunc = function() { 

    secondFunc(
     function (answerFromFunc2, paramsFromfunc2) { 

      var a = answerFromFunc2; 
      var b = paramsFromfunc2; 

     } 
    ); 

    //Do smt after the function request to the server is done 
    var doSmt = "another func or variable"; 

}; 
firstFunc(); 
Powiązane problemy