.delay() e .setTimeout()

Question

Secondo il documento jQuery su .delay(),

Il metodo .delay() è la cosa migliore per ritardare tra coda jQuery effetti. Poiché è limitato, non offre, ad esempio, un modo per annullare il delay-.delay() non è una sostituzione per la funzione setTimeout nativa di JavaScript, che potrebbe essere più appropriata per determinati casi .

Qualcuno potrebbe espanderlo? Quando è più appropriato usare .delay() e quando è meglio usare .setTimeout()?

Answer 1

Penso che ciò che hai pubblicato si spiega davvero.

Utilizzare .delay() per effetti jQuery tra cui animazioni.

setTimeout() è il migliore per tutto il resto. Ad esempio quando è necessario attivare un evento in un determinato intervallo di tempo.

Answer 2

.delay() viene utilizzato principalmente per concatenare gli effetti di animazione con pause intermedie.

Come i documenti citano, non c'è modo di annullare il ritardo. Nel caso in cui si desideri annullare il ritardo, è preferibile utilizzare setTimeout() per annullarlo con clearTimeout()

Answer 3

È possibile utilizzare delay con animazioni, per esempio:

$('.message').delay(5000).fadeOut(); 

È inoltre possibile utilizzare timeOut di posticipare l'inizio delle animazioni, per esempio:

window.setTimeout(function(){ 
    $('.message').fadeOut(); 
}, 5000); 

Come si vede, è più facile utilizzare delay di setTimeout con animazioni.

È possibile ritardare praticamente tutto con setTimeout, ma è possibile solo ritardare le animazioni con delay. I metodi che non sono le animazioni non sono interessati da delay, quindi questo non sarebbe aspettare un po 'prima di nascondere l'elemento, sarebbe nasconderlo subito:

$('.message').delay(5000).hide(); 

Answer 4

Per quanto ho capito, .delay() è significato specificamente per l'aggiunta di un ritardo tra i metodi in una determinata coda jQuery. Ad esempio, se desideri visualizzare un'immagine in dissolvenza durante l'intervallo di 1 secondo, visualizzarla per 5 secondi e poi passare un altro secondo per scomparire di nuovo dalla visualizzazione, puoi eseguire le seguenti operazioni:

$('#image').fadeIn(1000).delay(5000).fadeOut(1000); 

In questo caso, .delay() è più intuitivo da utilizzare poiché è specificamente pensato per ritardare gli eventi in una determinata coda jQuery. setImeout(), d'altra parte, è un metodo JavaScript nativo che non è destinato esplicitamente a una coda.Se si voleva una finestra di avviso a pop-up 1 secondo dopo aver fatto clic su un pulsante, è possibile effettuare le seguenti operazioni: effetto

function delayAlert() { 
    var x = setTimeout("alert('5 seconds later!')", 5000); 
} 

<input type="submit" value="Delay!" onclick="delayAlert();" /> 

Answer 5

Un altro lato di ritardo(): sembra di disabilitare la possibilità di nascondere (o fadeOut, ecc.) l'oggetto viene ritardato fino al termine del ritardo.

Per esempio, ho creato il seguente codice (forse uno sviluppatore StackOverflow riconoscerà i nomi CSS ....) per nascondere un 'div':

$j(document).ready(function(){ 
    var $messageDiv = $j("<div>").addClass('fading_message') 
     .text("my alert message here").hide(); 
    var $closeSpan = $j("<span>").addClass('notify_close').text("x"); 
    $closeSpan.click(function() {$j(this).parent().slideUp(400);}); 
    $messageDiv.append($closeSpan); 
    $j('.content_wrapper_div').prepend($messageDiv); 
    $messageDiv.fadeTo(500, .9).delay(5000).fadeTo(800,0); 
}); 

clic sulla "X" che è nel span (che è nel 'div') ha sparato la funzione click (ho provato con un avviso in là), ma il div non ha fatto lo slideUp come indicato. Tuttavia, se sostituisco l'ultima linea con questo:

 $messageDiv.fadeTo(500, .9); 

..quindi ha funzionato - quando ho cliccato il "x", il circostante div slideUp ed e lontano. Sembra come se lo sfondo in esecuzione della funzione "delay()" sul $ messageDiv "bloccasse" quell'oggetto, in modo che un meccanismo separato che cercava di chiuderlo non potesse farlo fino a che il ritardo non fosse stato completato.