esperar () o dormir () función en jquery?

Quiero agregar una clase, esperar 2 segundos y agregar otra clase.

.addClass("load").wait(2sec).addClass("done");

¿Hay alguna manera?

setTimeout ejecutará algún código después de un retraso de un período de tiempo (medido en milisegundos). Sin embargo, una nota importante: debido a la naturaleza de javascript, el resto del código continúa ejecutándose después de que se configura el temporizador:

$('#someid').addClass("load");

setTimeout(function(){
  $('#someid').addClass("done");
}, 2000);

// Any code here will execute immediately after the 'load' class is added to the element.

Eso sería .delay().

http://api.jquery.com/delay/

Sin embargo, si estás haciendo cosas AJAX, no deberías escribir automáticamente "hecho", sino que deberías esperar una respuesta y ver si realmente está hecho.

delay () no hará el trabajo. El problema con delay () es que es parte del sistema de animación y solo se aplica a las colas de animación.

¿Qué pasa si quieres esperar antes de ejecutar algo fuera de la animación?

Utilizar este:

window.setTimeout(function(){
                 // do whatever you want to do     
                  }, 600);

¿Qué sucede ?: En este escenario, espera 600 milisegundos antes de ejecutar el código especificado entre las llaves.

¡Esto me ayudó mucho una vez que lo descubrí y espero que también te ayude a ti!

AVISO IMPORTANTE: 'window.setTimeout' ocurre de forma asincrónica. ¡Tenga esto en cuenta al escribir su código!

Tenga en cuenta que esta es una pregunta antigua, pero escribí un complemento para abordar este problema que alguien podría encontrar útil.

https://github.com/madbook/jquery.wait

te permite hacer esto:

$('#myElement').addClass('load').wait(2000).addClass('done');

Hay una función, pero es adicional: http://docs.jquery.com/Cookbook/wait

Este pequeño fragmento te permite esperar:

$.fn.wait = function(time, type) {
    time = time || 1000;
    type = type || "fx";
    return this.queue(type, function() {
        var self = this;
        setTimeout(function() {
            $(self).dequeue();
        }, time);
    });
};

Puede utilizar la .delay()función.
Esto es lo que buscas:

.addClass("load").delay(2000).addClass("done");

El complemento xml4jQuery proporciona el método sleep (ms, callback). La cadena restante se ejecutará después del período de suspensión.

$(".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>

Usando la función setTimeout, por ejemplo Visite aquí por ejemplo