Crea funzione sincrona in javascript?

Question

Voglio sincronizzare le funzioni proprio come jQuery $.ajax({ .., async: false, .. });.

function A() { lalala .. }; 
function B() { dadada .. }; 
function C() { .. }; 

, quelli tutto compreso qualche effetto come fadeIn, Fuori, scivolo ... ecc

Comunque ho appena trovato se tali funzioni chiamate come seguente ..

A(); 
B(); 
C(); 

Tutti effetto di partenza quasi alla stessa ora. A mio avviso, ciò accade perché la funzione viene chiamata in modo sincrono ma non significa che la funzione B() sia iniziata dopo che la funzione A() era completamente terminata .. giusto?

Quindi, come posso far funzionare quelle funzioni in ordine?

ho trovato una funzione di uso di callback modo, ma non è abbastanza per me ..

Answer 1

Date un'occhiata al utilizzando jQuery $.Deferred();

che può consentire l'esecuzione di ogni funzione in sequenza, uno aspettando l'altro. Per esempio:

var a = function() { 
    var defer = $.Deferred(); 

    console.log('a() called'); 

    setTimeout(function() { 
     defer.resolve(); // When this fires, the code in a().then(/..../); is executed. 
    }, 5000); 

    return defer; 
}; 

var b = function() { 
    var defer = $.Deferred(); 

    console.log('b() called'); 

    setTimeout(function() { 
     defer.resolve(); 
    }, 5000); 

    return defer; 
}; 

var c = function() { 
    var defer = $.Deferred(); 

    console.log('c() called'); 

    setTimeout(function() { 
     defer.resolve(); 
    }, 5000); 

    return defer; 
}; 

a().then(b).then(c); 

Utilizzando defer.resolve(); significa che è possibile controllare quando la funzione cede esecuzione alla funzione successiva.

Answer 2

Suppongo che ogni funzione rende alcuni richiesta AJAX o un'animazione

function A() { 
    return $.ajax(....); 
    // or 
    // return $('#animate').animate({ width: 100 }, 1000).promise(); 
    // or 
    // var def = $.Defered(); 
    // in async function def.resolve(); 
    // return def.promise(); 
} 

function B() { 
    return $.ajax(....); 
    // or 
    // return $('#animate').animate({ width: 200 }, 3000).promise(); 
    // var def = $.Defered(); 
    // in async function def.resolve(); 
    // return def.promise(); 
} 

function C() { 
    return $.ajax(....); 
    // or 
    // return $('#animate').animate({ width: 300 }, 1000).promise(); 
    // var def = $.Defered(); 
    // in async function def.resolve(); 
    // return def.promise(); 
} 

$.when(A(), B(), C(), function (aRes, bRes, cRes) { 
}) 

//C().then(B()).then(A()).done(function() { 
// console.log('DONE'); 
//}); 

Per una risposta più dettagliata spiegare ciò che il vostro funzioni non

Answer 3

Avete effettivamente specificato tre funzioni sincrone, il che significa che B si innescherà solo al termine di A.

Tuttavia, eseguire attività asincrone come l'avvio di un'animazione non fermerà A dal completamento, quindi sembra che B non aspetti il ​​completamento.

Leggi su jQuery Deferreds. I differimenti sono un modello di progettazione, quindi non è specifico di jQuery, tuttavia hanno una grande implementazione.

function methodA() { 
    var dfd = $.Deferred(); 

    console.log('Start A'); 

    // Perform async action, like an animation or AJAX call 
    $('#el').slideOut(2000, function() { 
     // This callback executes when animation is done. 
     console.log('End A'); 
     dfd.resolve(); 
    }); 

    // Return unchangeable version of deferred. 
    return dfd.promise(); 
}; 

function methodB() { 
    console.log('Start B'); 
}; 

methodA().then(methodB);