Come devo chiamare 3 funzioni in modo da eseguire uno dopo l’altro?

Se ho bisogno di chiamare questa funzione uno dopo l’altro,

$('#art1').animate({'width':'1000px'},1000);        
$('#art2').animate({'width':'1000px'},1000);        
$('#art3').animate({'width':'1000px'},1000);        

So in jQuery potrei fare qualcosa di simile:

$('#art1').animate({'width':'1000px'},1000,'linear',function(){
    $('#art2').animate({'width':'1000px'},1000,'linear',function(){
        $('#art3').animate({'width':'1000px'},1000);        
    });        
});        

Ma, supponiamo che io non sto usando jQuery e la voglio chiamare:

some_3secs_function(some_value);        
some_5secs_function(some_value);        
some_8secs_function(some_value);        

Come dovrei chiamarlo funzioni per eseguire some_3secs_function, e DOPO la chiamata termina, quindi eseguire some_5secs_function e DOPO la chiamata termina, quindi chiamare some_8secs_function?

AGGIORNAMENTO:

Questo ancora non funziona:

(function(callback){
    $('#art1').animate({'width':'1000px'},1000);
    callback();
})((function(callback2){
    $('#art2').animate({'width':'1000px'},1000);
    callback2();
})(function(){
    $('#art3').animate({'width':'1000px'},1000);
}));

Tre animazioni di avvio e al tempo stesso

Dove è il mio errore?

  • vuoi dire per le funzioni di chiamata esattamente 3 5 & 8 secondi, una dopo l’altra?
  • Penso che tu sia semplicemente incerti circa sincrono contro asincrono funzione di esecuzione. Ho aggiornato la mia risposta qui sotto. Speranza che aiuta.
  • Prova questo.. github.com/dineshkani24/queuecall
InformationsquelleAutor texai | 2011-03-03



10 Replies
  1. 224

    In Javascript, ci sono sincrono e asincrona funzioni.

    Sincrono Funzioni

    Maggior parte delle funzioni in Javascript sono sincroni. Se si dovesse chiamare diversi sincrono funzioni di fila

    doSomething();
    doSomethingElse();
    doSomethingUsefulThisTime();

    verranno eseguite in ordine. doSomethingElse non si avvia fino a quando doSomething è stata completata. doSomethingUsefulThisTime, a sua volta, non si avvia fino a quando doSomethingElse è stata completata.

    Funzioni Asincrone

    Funzione asincrona, tuttavia, non si aspettano a vicenda. Vediamo lo stesso esempio di codice che abbiamo avuto in precedenza, questa volta assumendo che le funzioni sono asincrone

    doSomething();
    doSomethingElse();
    doSomethingUsefulThisTime();

    Le funzioni verranno inizializzate in ordine, ma saranno tutti di eseguire quasi allo stesso tempo. Si non si può sempre prevedere quale sarà il traguardo per primo: quello che succede a prendere la minor quantità di tempo per eseguire podio.

    Ma a volte, si desidera che le funzioni che sono asincrone per eseguire in ordine, e a volte si vuole che funzioni, che sono sincroni per eseguire in modo asincrono. Fortunatamente, questo è possibile con le richiamate e i timeout, rispettivamente.

    Richiamate

    Supponiamo di avere tre funzioni asincrone che si desidera eseguire in ordine, some_3secs_function, some_5secs_function, e some_8secs_function.

    Dato che le funzioni possono essere passati come argomenti in Javascript, è possibile passare una funzione di callback da eseguire dopo il termine della funzione.

    Se si creano le funzioni come questo

    function some_3secs_function(value, callback){
      //do stuff
      callback();
    }

    allora si può chiamare, poi in ordine, come questo:

    some_3secs_function(some_value, function() {
      some_5secs_function(other_value, function() {
        some_8secs_function(third_value, function() {
          //All three functions have completed, in order.
        });
      });
    });

    Timeout

    In Javascript, è possibile raccontare una funzione da eseguire dopo un certo timeout (in millisecondi). Questo può, in effetti, rendere sincrono funzioni si comportano in modo asincrono.

    Se abbiamo tre sincrono funzioni, siamo in grado di eseguire in modo asincrono tramite il setTimeout funzione.

    setTimeout(doSomething, 10);
    setTimeout(doSomethingElse, 10);
    setTimeout(doSomethingUsefulThisTime, 10);

    Questo è, tuttavia, un po ‘ brutto e viola il LAVAGGIO principio[wikipedia]. Si potrebbe pulire questo un po ‘ con la creazione di una funzione che accetta un array di funzioni e di un timeout.

    function executeAsynchronously(functions, timeout) {
      for(var i = 0; i < functions.length; i++) {
        setTimeout(functions[i], timeout);
      }
    }

    Questo può essere chiamato in questo modo:

    executeAsynchronously(
        [doSomething, doSomethingElse, doSomethingUsefulThisTime], 10);

    In sintesi, se si hanno le funzioni asincrone che si desidera eseguire syncronously, utilizzare funzioni di callback, e se avete sincrono funzioni che si desidera eseguire in modo asincrono, utilizzare timeout.

    • Questo non ritardare le funzioni per 3,5 e 8 secondi, come suggerito dall’esempio, essi saranno eseguiti uno dopo l’altro.
    • Ho dato per scontato che 3sec_function significava che la funzione ha preso 3 secondi per completare, non è che avete dovuto chiamare la prossimo dopo 3 secondi.
    • Aspetta, quindi sono confuso. Se questi sono semplici chiamate sincrone che capita di prendere un paio di secondi, poi perché abbiamo bisogno di tutto questo?
    • Buona domanda. Ora che ci penso, non ho idea.
    • per la più bella, contorto metodo che io abbia mai visto per la chiamata di tre sincrono funzioni in sequenza.
    • Dato OPs aggiornamento più recente sono abbastanza certo che questo non risponde alla domanda.
    • hahahaha, si sono esilaranti —>@lwburk Buona domanda. Ora che ci penso, non ho idea. – Peter Olson
    • Grazie per sapientemente spiegare la differenza tra async e sincronizzazione js funzioni. Questo spiega tanto.
    • Assolutamente d’amore la matrice di funzioni nella sezione timeout! Impressionante.
    • Hai intenzione di fare questo: setTimeout(functions[i], timeout * i);? Non tutte e 3 le funzioni di attendere 10 secondi ed eseguire allo stesso tempo, invece di aspettare sequenziale?
    • la tua risposta è completamente sbagliato
    • Questo è il NON corretto per i seguenti motivi: (1) il 3 timeout si risolve dopo 10 secondi, in modo che tutte e 3 le linee di trigger allo stesso tempo. (2) questo metodo richiede di conoscere la durata in anticipo e “pianificazione” funzioni per accadere in futuro, invece di aspettare per i precedenti async funzioni della catena per risolvere il grilletto. — invece volete usare una delle seguenti risposte utilizzando richiamate, promesse, o async biblioteca.
    • Per me, callback è un modo migliore per realizzare sincrono comportamento rispetto ad altri metodi. Grande soluzione.
    • Mi piace il tuo hackish modo di timeout!! è buona solo per due funzioni

  2. 31

    Questa risposta utilizza promesse, una funzione JavaScript del ECMAScript 6 standard. Se la vostra piattaforma di destinazione non supporta promises, polyfill con PromiseJs.

    Guardare la mia risposta qui Attendere fino a una Funzione con animazioni è finito fino a quando l’esecuzione di un’altra Funzione se si desidera utilizzare jQuery animazioni.

    Qui è che cosa il vostro codice sarebbe simile con ES6 Promises e jQuery animations.

    Promise.resolve($('#art1').animate({ 'width': '1000px' }, 1000).promise()).then(function(){
        return Promise.resolve($('#art2').animate({ 'width': '1000px' }, 1000).promise());
    }).then(function(){
        return Promise.resolve($('#art3').animate({ 'width': '1000px' }, 1000).promise());
    });

    Normali metodi possono anche essere avvolto in Promises.

    new Promise(function(fulfill, reject){
        //do something for 5 seconds
        fulfill(result);
    }).then(function(result){
        return new Promise(function(fulfill, reject){
            //do something for 5 seconds
            fulfill(result);
        });
    }).then(function(result){
        return new Promise(function(fulfill, reject){
            //do something for 8 seconds
            fulfill(result);
        });
    }).then(function(result){
        //do something with the result
    });

    Il then metodo viene eseguito non appena il Promise finito. Normalmente, il valore di ritorno della function passato a then è passato al prossimo come risultato.

    Ma se un Promise viene restituito, il prossimo then funzione attende fino a quando il Promise terminato l’esecuzione e riceve i risultati di essa (il valore che viene passato fulfill).

    • So che questo è utile, ma ha trovato il codice difficile da capire senza guardare per un esempio del mondo reale per dare un po ‘ di contesto. Ho trovato questo video su YouTube: youtube.com/watch?v=y5mltEaQxa0, e ha scritto su la fonte del video qui drive.google.com/file/d/1NrsAYs1oaxXw0kv9hz7a6LjtOEb6x7z-/… Ci sono alcuni più sfumature, come la cattura mancanti in questo esempio, che questo elabora. (utilizzare un id diverso in getPostById() linea o provare a cambiare il nome di un autore così non corrisponde un post ecc)
  3. 20

    Suona come non apprezzare la differenza tra sincrono e asincrona funzione di esecuzione.

    Il codice che hai fornito nel tuo aggiornamento immediatamente esegue ciascuna delle vostre funzioni di callback, che a sua volta avviare immediatamente un’animazione. Le animazioni, tuttavia, eseguire asyncronously. Funziona in questo modo:

    1. Eseguire un passo in animazione
    2. Chiamata setTimeout con una funzione che contiene l’animazione successiva fase e ritardo
    3. Qualche tempo passa
    4. La richiamata dato setTimeout esegue
    5. Tornare al passaggio 1

    Questo continua fino a quando l’ultimo passo nell’animazione completa. Nel frattempo, sincrono funzioni di tempo fa completato. In altre parole, la chiamata al animate funzione non davvero prendere 3 secondi. L’effetto è simulato con ritardi e le funzioni di callback.

    Che cosa avete bisogno è un coda. Internamente, jQuery code le animazioni, solo l’esecuzione tuo richiamata una volta il suo corrispondente animazione completa. Se il tuo richiamata quindi inizia un’altra animazione, l’effetto è che essi vengono eseguiti in sequenza.

    Nel caso più semplice, questo è equivalente alla seguente:

    window.setTimeout(function() {
        alert("!");
        //set another timeout once the first completes
        window.setTimeout(function() {
            alert("!!");
        }, 1000);
    }, 3000); //longer, but first

    Ecco un generale asincrona loop funzione. Chiama il dato di funzioni in ordine, in attesa per il numero specificato di secondi tra ogni.

    function loop() {
        var args = arguments;
        if (args.length <= 0)
            return;
        (function chain(i) {
            if (i >= args.length || typeof args[i] !== 'function')
                return;
            window.setTimeout(function() {
                args[i]();
                chain(i + 1);
            }, 2000);
        })(0);
    }    

    Uso:

    loop(
      function() { alert("sam"); }, 
      function() { alert("sue"); });

    Si può ovviamente modificare questo per prendere configurabile tempi di attesa o eseguire subito la prima funzione o di interrompere l’esecuzione di quando una funzione nella catena restituisce false o apply le funzioni in un determinato contesto o qualsiasi altra cosa potrebbe essere necessario.

  4. 10

    Credo che il async biblioteca fornisce un modo molto elegante per fare questo. Mentre le promesse e le funzioni di callback può ottenere un po ‘ difficile destreggiarsi con, async può dare neat modelli per ottimizzare il vostro processo di pensiero. Per l’esecuzione di funzioni in serie, si avrebbe bisogno di metterli in un async cascata. In async lingo, ogni funzione è chiamata task che richiede un po ‘ di argomenti e una callback; che è la funzione successiva nella sequenza. La struttura di base sarebbe qualcosa come:

    async.waterfall([
      //A list of functions
      function(callback){
          //Function no. 1 in sequence
          callback(null, arg);
      },
      function(arg, callback){
          //Function no. 2 in sequence
          callback(null);
      }
    ],    
    function(err, results){
       //Optional final callback will get results for all prior functions
    });

    Ho solo cercato di spiegare brevemente la struttura di qui. Leggere attraverso la cascata guida per ulteriori informazioni, è abbastanza ben scritto.

    • Questo fa davvero JS un po ‘ più sopportabile.
  5. 8

    le funzioni devono assumere una funzione di callback che viene chiamato quando finisce.

    function fone(callback){
    ...do something...
    callback.apply(this,[]);
    
    }
    
    function ftwo(callback){
    ...do something...
    callback.apply(this,[]);
    }

    poi l’utilizzo sarebbe come:

    fone(function(){
      ftwo(function(){
       ..ftwo done...
      })
    });
  6. 4
    asec=1000; 
    
    setTimeout('some_3secs_function("somevalue")',asec*3);
    setTimeout('some_5secs_function("somevalue")',asec*5);
    setTimeout('some_8secs_function("somevalue")',asec*8);

    Non voglio andare in una profonda discussione setTimeout qui, ma:

    • in questo caso ho aggiunto il codice per eseguire come una stringa. questo è il modo più semplice per passare una var nel tuo setTimeout-de funzione, ma i puristi potranno lamentarsi.
    • inoltre, è possibile passare il nome di una funzione senza le virgolette, ma la parte variabile non può essere superato.
    • il codice non attendere setTimeout di trigger.
    • Questo può essere difficile per ottenere la vostra testa intorno al primo: a causa del punto precedente, se è possibile passare una variabile da una chiamata di funzione, tale variabile non esiste più da tempo il timeout trigger – la chiamata di funzione avrà eseguito e vars andato.
    • Mi sono stati conosciuti per utilizzare le funzioni anonime per aggirare tutto questo, ma ci potrebbe essere un modo migliore,
  7. 3

    Dal momento che è etichettato con javascript, vorrei andare con un timer di controllo dal momento che i vostri nomi delle funzioni sono 3, 5, e 8 secondi. Quindi, avviare il timer, 3 secondi, chiamare i primi, 5 secondi prima di chiamare il secondo, 8 secondi di chiamata di terzo, poi quando è fatto, arrestare il timer.

    Normalmente in Javascript è corretto per le funzioni vengono eseguiti uno dopo l’altro, ma dal momento che sembra come se si sta cercando di fare temporizzato animazione, un timer sarebbe la vostra migliore scommessa.

  8. 2

    JS:

    //sample01
    (function(_){_[0]()})([
    	function(){$('#art1').animate({'width':'10px'},100,this[1].bind(this))},
    	function(){$('#art2').animate({'width':'10px'},100,this[2].bind(this))},
    	function(){$('#art3').animate({'width':'10px'},100)},
    ])
    
    //sample02
    (function(_){_.next=function(){_[++_.i].apply(_,arguments)},_[_.i=0]()})([
    	function(){$('#art1').animate({'width':'10px'},100,this.next)},
    	function(){$('#art2').animate({'width':'10px'},100,this.next)},
    	function(){$('#art3').animate({'width':'10px'},100)},
    ]);
    
    //sample03
    (function(_){_.next=function(){return _[++_.i].bind(_)},_[_.i=0]()})([
    	function(){$('#art1').animate({'width':'10px'},100,this.next())},
    	function(){$('#art2').animate({'width':'10px'},100,this.next())},
    	function(){$('#art3').animate({'width':'10px'},100)},
    ]);

    • Potete per favore spiegare di cosa si tratta? Ciò che è legato al carattere di sottolineatura? Che cosa fa la funzione assegnata in next fare?
    • Spiego campione 2 con l’utilizzo di jsfiddle. jsfiddle.net/mzsteyuy/3 Se mi permettete, per spiegare circa, campione 2 è una via breve del codice in jsfiddle. la sottolineatura è un Array di elementi in contrasto con valiable( i ) e la funzione avanti e la funzione [0] ~[2].
    • È anche possibile fare questo. jsfiddle.net/mzsteyuy/4
  9. 1

    Si potrebbe anche usare promesse in questo modo:

        some_3secs_function(this.some_value).then(function(){
           some_5secs_function(this.some_other_value).then(function(){
              some_8secs_function(this.some_other_other_value);
           });
        });

    Si dovrebbe fare some_value globale per l’accesso dall’interno .quindi

    In alternativa, all’esterno funzione restituisce il valore della funzione interna vorresti utilizzare, in questo modo:

        one(some_value).then(function(return_of_one){
           two(return_of_one).then(function(return_of_two){
              three(return_of_two);
           });
        });
  10. 0

    Io uso un ‘aspettare’ la funzione di base di javascript setTimeout

    /*
        funcCond : function to call to check whether a condition is true
        readyAction : function to call when the condition was true
        checkInterval : interval to poll <optional>
        timeout : timeout until the setTimeout should stop polling (not 100% accurate. It was accurate enough for my code, but if you need exact milliseconds, please refrain from using Date <optional>
        timeoutfunc : function to call on timeout <optional>
    */
    function waitUntil(funcCond, readyAction, checkInterval, timeout, timeoutfunc) {
        if (checkInterval == null) {
            checkInterval = 100; //checkinterval of 100ms by default
        }
        var start = +new Date(); //use the + to convert it to a number immediatly
        if (timeout == null) {
            timeout = Number.POSITIVE_INFINITY; //no timeout by default
        }
        var checkFunc = function() {
            var end = +new Date(); //rough timeout estimations by default
    
            if (end-start > timeout) {
                if (timeoutfunc){ //if timeout function was defined
                    timeoutfunc(); //call timeout function
                }
            } else {
                if(funcCond()) { //if condition was met
                    readyAction(); //perform ready action function
                } else {
                    setTimeout(checkFunc, checkInterval); //else re-iterate
                }
            }
        };
        checkFunc(); //start check function initially
    };

    Questo funzionerebbe perfettamente se il set di funzioni di una certa condizione di vero, che si sarebbe in grado di sondaggio. In più è dotato di timeout, che offre alternative nel caso in cui la funzione non è riuscito a fare qualcosa (anche all’interno di tempo-intervallo. Pensare feedback degli utenti!)

    ad esempio

    doSomething();
    waitUntil(function() { return doSomething_value===1;}, doSomethingElse);
    waitUntil(function() { return doSomethingElse_value===1;}, doSomethingUseful);

    Note

    Data causa ruvida timeout stime. Per maggiore precisione, passare a funzioni come la console.time(). Prendete nota che la Data offre una maggiore cross-browser e il supporto legacy. Se non hai bisogno esatta millisecondo misure; non preoccupatevi, o, in alternativa, avvolgere, e di offrire console.time() quando il browser supporta

Lascia un commento