funkcja wait () lub sleep () w jquery?

Chcę dodać klasę, odczekaj 2 sekundy i dodaj kolejną.

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

Czy jest jakiś sposób?

setTimeout wykona kod po pewnym czasie (mierzonym w milisekundach). Jednak ważna uwaga: ze względu na naturę javascript reszta kodu nadal działa po skonfigurowaniu timera:

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

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

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

Tak by było .delay().

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

Jeśli jednak robisz rzeczy AJAX, naprawdę nie powinieneś po prostu automatycznie pisać „gotowe”, powinieneś naprawdę poczekać na odpowiedź i zobaczyć, czy faktycznie jest zrobiona.

delay () nie wykona zadania. Problem z delay () jest częścią systemu animacji i dotyczy tylko kolejek animacji.

A co jeśli chcesz zaczekać przed wykonaniem czegoś poza animacją?

Użyj tego:

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

Co się dzieje ?: W tym scenariuszu czeka 600 milisekund przed wykonaniem kodu określonego w nawiasach klamrowych.

To bardzo mi pomogło, kiedy już to rozgryzłem i mam nadzieję, że pomoże to również Tobie!

WAŻNA UWAGA: „window.setTimeout” działa asynchronicznie. Miej to na uwadze podczas pisania kodu!

Zdaj sobie sprawę, że to stare pytanie, ale napisałem wtyczkę, aby rozwiązać ten problem, która może być przydatna.

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

pozwala ci to zrobić:

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

Jest funkcja, ale jest dodatkowa: http://docs.jquery.com/Cookbook/wait

Ten mały fragment pozwala poczekać:

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

Możesz użyć .delay()funkcji.
Oto, czego szukasz:

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

Wtyczka xml4jQuery udostępnia metodę uśpienia (ms, callback). Pozostały łańcuch zostałby wykonany po okresie snu.

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

Korzystanie z funkcji setTimeout, na przykład Odwiedź tutaj