Voglio aggiungere una classe, attendere 2 secondi e aggiungere un'altra classe.
.addClass("load").wait(2sec).addClass("done");C'è un modo?
Voglio aggiungere una classe, attendere 2 secondi e aggiungere un'altra classe.
.addClass("load").wait(2sec).addClass("done");C'è un modo?
Risposte:
setTimeout eseguirà del codice dopo un certo periodo di tempo (misurato in millisecondi). Tuttavia, una nota importante: a causa della natura di javascript, il resto del codice continua a essere eseguito dopo l'impostazione del timer:
$('#someid').addClass("load");
setTimeout(function(){
$('#someid').addClass("done");
}, 2000);
// Any code here will execute immediately after the 'load' class is added to the element.Sarebbe .delay().
Se stai facendo cose AJAX, in realtà non dovresti semplicemente scrivere automaticamente "fatto", dovresti davvero aspettare una risposta e vedere se è effettivamente fatto.
.removeClass('load')tua aggiunta di entrambe le classi venga caricata e completata, il che probabilmente è indesiderato. Se stai effettivamente aspettando il completamento di un'azione asincrona, la soluzione migliore è fare .addClass QUANDO viene completato e ha successo, in caso contrario .addClass ('errore') forse un'idea
delay () non farà il lavoro. Il problema con delay () è che fa parte del sistema di animazione e si applica solo alle code di animazione.
E se volessi aspettare prima di eseguire qualcosa al di fuori dell'animazione?
Usa questo:
window.setTimeout(function(){
// do whatever you want to do
}, 600);Cosa succede ?: In questo scenario attende 600 millisecondi prima di eseguire il codice specificato tra parentesi graffe.
Questo mi ha aiutato molto una volta che l'ho capito e spero che possa aiutare anche te!
AVVISO IMPORTANTE: "window.setTimeout" avviene in modo asincrono. Tienilo a mente quando scrivi il tuo codice!
Renditi conto che questa è una vecchia domanda, ma ho scritto un plugin per risolvere questo problema che qualcuno potrebbe trovare utile.
https://github.com/madbook/jquery.wait
ti permette di fare questo:
$('#myElement').addClass('load').wait(2000).addClass('done');C'è una funzione, ma è extra: http://docs.jquery.com/Cookbook/wait
Questo piccolo frammento ti permette di aspettare:
$.fn.wait = function(time, type) {
time = time || 1000;
type = type || "fx";
return this.queue(type, function() {
var self = this;
setTimeout(function() {
$(self).dequeue();
}, time);
});
};Puoi usare la .delay()funzione.
Questo è quello che stai cercando:
.addClass("load").delay(2000).addClass("done");Il plugin xml4jQuery fornisce il metodo sleep (ms, callback). La catena rimanente verrà eseguita dopo il periodo di sospensione.
$(".toFill").html("Click here")
.$on('click')
.html('Loading...')
.sleep(1000)
.html( 'done')
.toggleClass('clickable')
.prepend('Still clickable <hr/>');.toFill{border: dashed 2px palegreen; border-radius: 1em; display: inline-block;padding: 1em;}
.clickable{ cursor: pointer; border-color: blue;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.xml4jquery.com/ajax/libs/xml4jquery/1.1.2/xml4jquery.js"></script>
<div class="toFill clickable"></div>Utilizzando la funzione setTimeout, ad esempio Visita qui per esempio