Come scrivere un ciclo jQuery, che attende ogni funzione di completare prima di continuare il ciclo

Vi prego di perdonarmi se questo è ovvia.

Ho una quantità sconosciuta di elementi di una pagina, che ho bisogno di un ciclo attraverso uno alla volta e fare cose. Tuttavia, ho bisogno di un ciclo di mettere in pausa fino a quando le funzioni utilizzate sugli elementi di completamento, e poi proseguire per l’iterazione successiva.

Ho provato a fare questo in un $.ogni ciclo, ma è sparato i comandi molto rapidamente e finito senza attendere per loro di completare.

Tutte le idee?

$('elem').each(function(){
    $(this).fadeIn().wait(5000).fadeOut();
});

Questo è quello che ho, molto semplice.
Ho avuto la funzione wait() da qui: jquery ricettario sito.

Problema è che il ciclo non attendere l’effettivo comando funziona come previsto, è solo che vanno tutti in una volta fuori.

Qualsiasi aiuto è apprezzato, grazie.

EDIT: questo viene eseguito, mi potrebbe essere utile per eseguire il ciclo di nuovo, in modo che l’elenco di elems sarà sbiadito in /- out di nuovo in sequenza

EDIT2: da allora Hanno ottenuto il 1.4.2 jQuery lib, stava usando 1.3.2, da qui l’usanza della funzione wait (). Ora, con ritardo (), come indicato da lobstrosity.
Riuscito a cobble insieme qualcosa di vicino a quello che ho bisogno da la sua risposta, grazie lobstrosity 🙂 .

InformationsquelleAutor alan | 2010-03-03



4 Replies
  1. 9

    Prima di tutto, jQuery 1.4 aggiunto il ritardo funzione, che presumo sia quello che la vostra abitudine di attendere l’attuazione sta facendo.

    Con ritardo, si può sorta di falso la funzionalità di ogni elemento “tempo di attesa” sull’elemento precedente per concludere con il primo parametro per ogni callback come un moltiplicatore per un iniziale ritardo. Come questo:

    var duration = 5000;
    
    $('elem').each(function(n) {
        $(this).delay(n * duration).fadeIn().delay(duration).fadeOut();
    });

    In modo che il primo elemento fadeIn immediatamente. La seconda fadeIn dopo 5.000 ms. Il terzo, dopo 10.000 ms e così via. Tenete a mente che questo è fare finta di esserlo. Ogni elemento non è in realtà in attesa del precedente elemento di finitura.

    • aaaahh questo è abbastanza vicino, grazie. E stavo usando 1.3.2, appena ricevuto l’ultima lib, grazie per la segnalazione. L’unico problema con questo è che una volta che faccio le azioni a $(‘.elem’), io voglio fare tutto di nuovo. Io modificare la domanda di refelct questo, dovrebbe aver detto, grazie.
    • Non ho capito ancora perfetto, ma questo risposto alla mia domanda, grazie mille.
  2. 3

    Il ciclo principale utilizzando each() verrà eseguito senza indugio sopra la vostra collezione di elementi. Hai bisogno di coda di questi elementi, invece.

    Questo potrebbe bisogno di tweaking (e, si potrebbe forse usare jQuery code?) ma per dimostrare utilizzando la ricorsione per il processo di coda:

    function animate(elems) {
        var elem = elems.shift();
        $(elem).fadeIn().wait(5000).fadeOut(2000, function() {
            if (elems.length) {
                animate(elems);
            }
        });
    }
    
    var elems = $('elem');
    animate(elems);
    • Penso che un numero imprecisato di elementi è bello per questo, perché abbiamo appena shift() il prossimo elem off matrice. Questo verrà eseguito solo sopra la vostra collezione, una volta, però, quindi terminare.
    • shift non sembra funzionare su oggetto jquery, ho ottenuto questo errore : TypeError: 'undefined' is not a function (evaluating 'elems.shift()')
    • Appena fondato la soluzione : utilizzare get() : var elems = $("elem").get();
  3. 0

    Probabilmente è necessario aspettare prima di chiamare la prima funzione :

      $(this).wait().fadeIn().wait(5000).fadeOut();

    L’altra opzione è di usare il callback.

     $(this).wait().fadeIn('slow', function(){$(this).fadeOut('slow')});

    In questo modo il fadeOut non si avvia fino a quando il fadeIn è fatto.

    • grazie per la risposta, ma l’ordine del fadeIn e fadeOuts non è un problema, è il fatto che il .ogni ciclo di chiamate ogni uno di loro all’interno di circa 0,3 di un secondo, e la situazione, allo stesso tempo, ho bisogno di un loop di attesa per la richiamata.
  4. 0

    Ecco una demo del mio soluzione.

    Che cosa avete bisogno non è un ciclo di gestire l’elaborazione. Quello che vuoi è una catena di chiamate. Sembra che ci potrebbe essere un modo più semplice, ma qui è un brute-force metodo.

    //Create a function that does the chaining.
    function fadeNext(x,y) {
      return function() { x.fadeIn(100).delay(100).fadeOut(1000, (y?y.fadeNext:y)); };
    }
    
    //Get all the elements to fade in reverse order.
    var elements = [];
    $('.f').each(function(i,e) {elements.unshift(e);});
    
    //Iterate over the elements and configure a fadeNext for each.
    var next;
    for (var i in elements) {
      var e = $(elements[i]);
      e.fadeNext = fadeNext(e,next);
      next = e;
    }
    
    //Start the fade.
    next.fadeNext();
    • questa è una buona idea, grazie per la pubblicazione. Questo codice è valido 🙂

Lascia un commento