2013-02-27 15 views
9

C'è qualche differenza se faccio:Come determinare cosa usare: next(); o dequeue() ;?

$queue.queue(function(next){ 
    //... 
    next(); 
}).queue(function(next){ 
    //... 
    next(); 
}); 

contro

$queue.queue(function(){ 
    //... 
    $(this).dequeue(); 
}).queue(function(){ 
    //... 
    $(this).dequeue(); 
}); 

fanno la stessa cosa?

Quali sono le differenze e quali dovrei usare?

E 'strano perché la documentazione jQuery in realtà non parlare .next(), dicono sempre di usare .dequeue() ma la mia gente sul posto di lavoro utilizzano la funzione .next() quindi questo mi ha un po' confuso.

+0

Come si presenta una domanda [tag: ottimizzazione]? – millimoose

+0

Cosa 'next()' fa è documentato bene in [i documenti per '.queue()'] (http://api.jquery.com/queue/#queue2): "A partire da jQuery 1.4, la funzione che è chiamato viene passata un'altra funzione come primo argomento. Quando viene chiamato, questo automaticamente rimuove dalla coda l'elemento successivo e mantiene la coda in movimento. " – millimoose

+0

Ho aggiunto Ottimizzazione perché, afferma che l'ottimizzazione è l'atto di migliorare un metodo o un progetto. Sto cercando il metodo migliore per l'uso di queste funzioni quindi, quindi, sto cercando di "ottimizzare" il mio codice ... Ha un senso al 100% per me! – Epik

risposta

7

Che io sappia, non c'è differenza. Non sono sicuro del motivo per cui uno sarebbe preferibile all'altro o perché entrambi sono menzionati perché ciò mi confonde.

Guardando http://code.jquery.com/jquery-1.9.1.js vediamo:

1915 next = function() { 
     jQuery.dequeue(elem, type); 
    }; 

... nel metodo jQuery.dequeue. Questo è chiamato un po 'più tardi (nella riga 1936) come fn.call(elem, next, hooks). Si vede che next è il primo parametro nel callback queue e fn è queue in quel momento.

Guardando al futuro, vediamo

1983 dequeue: function(type) { 
     return this.each(function() { 
      jQuery.dequeue(this, type); 
     }); 
    }, 

Questa è definita su jQuery.fn, così che è la funzione chiamata da $(this).dequeue. Tuttavia, questo fa esattamente la stessa cosa. L'unica differenza è l'elemento che viene rimosso dalla coda. In fn.dequeue scorre nella raccolta, ma questo sarà solo un elemento per $(this).

Se guardiamo indietro, vediamo che cosa elem è però:

1908 dequeue: function(elem, type) { 

... Ehi, aspetta un secondo .. è this (quando viene chiamato da $(this).dequeue)! Quindi puoi vedere che fanno esattamente la stessa cosa. $("some other collection").dequeue funzionerebbe diversamente, però.

Chiamando next() si risparmia una chiamata aggiuntiva .each, quindi suppongo che sarebbe più veloce.

A proposito, non è necessario chiamarlo next nella richiamata poiché è possibile rinominare i parametri in base alle proprie esigenze.

EDIT: Per la mia mini-discussione con il mio illustre collega @ FabrícioMatté, ci può effettivamente essere una differenza di funzionalità tra next() e $(this).dequeue(), in particolare quando non si utilizza la coda standard fx. Quando viene creata la funzione next, è impostata per chiamare $.dequeue con il tipo acquisito dallo queue, ma il $.fn.dequeue accetta il tipo come argomento.Questa è forse una motivazione ancora più grande per rimanere con next(), anche se non ho mai visto qualcuno usare praticamente altro che la coda degli effetti standard praticamente.

+0

Molto ben spiegato grazie. Ha senso ora quando è disposto il modo in cui hai. – Epik

+0

+1 per il problema delle code non-'fx', ho modificato anche la mia risposta per ottemperare a questo. '=]' –

4

Entrambe le funzioni jQuery.fn.dequeue e next sono semplicemente wrapper per jQuery.dequeue, passando lo stesso insieme di argomenti in entrambi gli esempi.


(Fino ad oggi, come di jQuery 1.9.1)

Per i parametri della funzione prossimi: type è un parametro opzionale che indica la coda, il default è fx che è coda di animazione di default di jQuery. element è un riferimento di elemento DOM.

$.fn.dequeue:

dequeue: function(type) { 
    return this.each(function() { 
     jQuery.dequeue(this, type); 
    }); 
} 

$().dequeue chiede semplicemente $.dequeue per ciascun elemento contenuto all'interno dell'oggetto jQuery.

Il tuo caso d'uso $(this).dequeue() chiamerà $.dequeue una singola volta con l'elemento di riferimento iniziale di this.

Analogamente, next passerà un singolo elemento di riferimento per $.dequeue, che è l'elemento corrente avente la sua coda rimosse dalla coda:

next = function() { 
    jQuery.dequeue(elem, type); 
}; 

In altre parole, questi sono essenzialmente le stesse. next è un po 'più diretto in quanto non ha un wrapper iterativo, quindi next() dovrebbe essere alcuni microsecondi più veloce di $.fn.dequeue().

La differenza principale è che è possibile chiamare .dequeue() su più elementi e verrà deselezionata ciascuna di esse, mentre next() è associata direttamente all'elemento con la coda rimossa dalla coda.

Per casi di utilizzo in cui è presente $(this).dequeue() all'interno della richiamata, questo è irrilevante. $.fn.dequeue è utile quando si inizia a dequeue uno o più elementi. $(this).dequeue() ha un risultato equivalente a next(), ma in questo caso quest'ultimo fornisce un guadagno di microsecondi.


Come notato da @Explosion Pillole nei commenti, v'è ancora una particolarità più quando si tratta di non fx code:

$(this).dequeue() senza l'argomento type sarà annullare l'accodamento coda di default (fx) quindi le code non fx richiedono il nome da passare come parametro a .dequeue(), mentre .next() cerca la sua catena dell'ambito di creazione e recupera automaticamente lo type all'interno dell'ambito $.dequeue() che ha creato t he oggetto funzione next.

Pertanto, quando si utilizza una coda non fx, si dovrà passare il nome della coda di $().dequeue(queueIdentifier), mentre .next() sarà sempre di rimozione in coda che il callback appartiene.

+0

Stavo per modificare la mia risposta per commentare sul fatto che '$ .fn.dequeue' prende' type' come argomento, ma 'next' è definito con' type' acquisito dall'associazione 'queue'. Ciò significa che '$ (this) .dequeue' apparentemente non funziona con le code non' 'fx' senza un argomento aggiuntivo mentre' next() 'lo farebbe. Ti sembra giusto? –

+0

@ExplosionPills Sì, assolutamente. '$ (this) .dequeue()' senza l'argomento 'type' rimuoverà la coda di default (' fx') in modo che le code non-'fx' richiedano il nome della coda da passare come parametro mentre '.next()' " eredita "il tipo' passato'. Bel posto. '=]' –