hàm wait () hay sleep () trong jquery?

Tôi muốn thêm một lớp, đợi 2 giây và thêm một lớp khác.

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

Không có cách nào khác ư?

setTimeout sẽ thực thi một số mã sau một khoảng thời gian trễ (tính bằng mili giây). Tuy nhiên, một lưu ý quan trọng: do bản chất của javascript, phần còn lại của mã tiếp tục chạy sau khi bộ hẹn giờ được thiết lập:

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

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

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

Đó sẽ là .delay().

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

Nếu bạn đang làm AJAX những thứ tho, bạn thực sự không nên chỉ tự động viết "xong", bạn thực sự nên đợi phản hồi và xem nó có thực sự hoàn thành hay không.

delay () sẽ không thực hiện công việc. Vấn đề với delay () là nó là một phần của hệ thống hoạt ảnh và chỉ áp dụng cho hàng đợi hoạt ảnh.

Điều gì sẽ xảy ra nếu bạn muốn đợi trước khi thực hiện một cái gì đó bên ngoài hoạt ảnh ??

Dùng cái này:

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

Điều gì xảy ra ?: Trong trường hợp này, nó đợi 600 mili giây trước khi thực thi mã được chỉ định trong dấu ngoặc nhọn.

Điều này đã giúp tôi rất nhiều khi tôi tìm ra nó và hy vọng nó cũng sẽ giúp bạn!

LƯU Ý QUAN TRỌNG: 'window.setTimeout' xảy ra không đồng bộ. Hãy ghi nhớ điều đó khi viết mã của bạn!

Nhận ra rằng đây là một câu hỏi cũ, nhưng tôi đã viết một plugin để giải quyết vấn đề này mà ai đó có thể thấy hữu ích.

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

cho phép bạn làm điều này:

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

Có một chức năng, nhưng nó bổ sung: http://docs.jquery.com/Cookbook/wait

Đoạn mã nhỏ này cho phép bạn đợi:

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

Bạn có thể sử dụng .delay()chức năng.
Đây là những gì bạn đang theo đuổi:

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

Plugin xml4jQuery cung cấp phương thức sleep (ms, callback). Chuỗi còn lại sẽ được thực hiện sau thời gian ngủ.

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

Sử dụng hàm setTimeout, chẳng hạn như Truy cập vào đây chẳng hạn