ฟังก์ชั่น wait () หรือ sleep () ใน jquery?

ฉันต้องการเพิ่มชั้นเรียนรอ 2 วินาทีแล้วเพิ่มชั้นเรียนอื่น

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

มีวิธีใดบ้าง?

setTimeout จะรันโค้ดบางส่วนหลังจากล่าช้าไปช่วงเวลาหนึ่ง (วัดเป็นมิลลิวินาที) อย่างไรก็ตามหมายเหตุสำคัญ: เนื่องจากลักษณะของจาวาสคริปต์โค้ดส่วนที่เหลือยังคงทำงานต่อไปหลังจากตั้งค่าตัวจับเวลา:

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

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

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

.delay()ที่ต้องการจะ

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

หากคุณกำลังทำสิ่งต่างๆของ AJAX คุณไม่ควรเขียนว่า "เสร็จสิ้น" โดยอัตโนมัติจริงๆคุณควรรอการตอบกลับและดูว่าทำได้จริงหรือไม่

ล่าช้า () จะไม่ทำงาน ปัญหาเกี่ยวกับความล่าช้า () เป็นส่วนหนึ่งของระบบภาพเคลื่อนไหวและใช้กับคิวภาพเคลื่อนไหวเท่านั้น

ถ้าคุณต้องการรอก่อนที่จะดำเนินการบางอย่างนอกภาพเคลื่อนไหว ??

ใช้สิ่งนี้:

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

จะเกิดอะไรขึ้น: ในสถานการณ์นี้จะรอ 600 มิลลิวินาทีก่อนที่จะดำเนินการตามรหัสที่ระบุไว้ในวงเล็บปีกกา

สิ่งนี้ช่วยฉันได้มากเมื่อฉันคิดออกและหวังว่ามันจะช่วยคุณได้เช่นกัน!

ประกาศที่สำคัญ: 'window.setTimeout' เกิดขึ้นแบบอะซิงโครนัส โปรดจำไว้ว่าเมื่อเขียนโค้ดของคุณ!

ตระหนักว่านี่เป็นคำถามเก่า แต่ฉันเขียนปลั๊กอินเพื่อแก้ไขปัญหานี้ซึ่งอาจมีคนคิดว่ามีประโยชน์

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

ให้คุณทำสิ่งนี้:

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

มีฟังก์ชั่น แต่พิเศษ: http://docs.jquery.com/Cookbook/wait

ตัวอย่างเล็ก ๆ น้อย ๆ นี้ให้คุณรอ:

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

คุณสามารถใช้.delay()ฟังก์ชัน
นี่คือสิ่งที่คุณต้องการ:

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

ปลั๊กอิน xml4jQuery ให้เมธอด sleep (ms, callback) โซ่ที่เหลือจะถูกดำเนินการหลังจากช่วงเวลาพักเครื่อง

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