jQuery: ฉันสามารถโทรล่าช้า () ระหว่าง addClass () และเช่นนั้นได้หรือไม่?

บางอย่างเรียบง่ายเพียง:

$("#div").addClass("error").delay(1000).removeClass("error");

ดูเหมือนจะไม่ทำงาน สิ่งที่จะเป็นทางเลือกที่ง่ายที่สุด?

คุณสามารถสร้างรายการคิวใหม่เพื่อทำการลบคลาส:

$("#div").addClass("error").delay(1000).queue(function(next){
    $(this).removeClass("error");
    next();
});

หรือใช้วิธีdequeue :

$("#div").addClass("error").delay(1000).queue(function(){
    $(this).removeClass("error").dequeue();
});

เหตุผลที่คุณต้องการโทรnextหรือdequeueแจ้งให้ jQuery ทราบว่าคุณทำรายการนี้แล้วและควรย้ายไปยังรายการถัดไป

AFAIK วิธีการหน่วงเวลาใช้งานได้เฉพาะสำหรับการแก้ไข CSS แบบตัวเลข

สำหรับวัตถุประสงค์อื่น JavaScript มาพร้อมกับวิธีการ setTimeout:

window.setTimeout(function(){$("#div").removeClass("error");}, 1000);

ฉันรู้ว่านี่เป็นโพสต์ที่เก่ามาก แต่ฉันได้รวมคำตอบบางส่วนไว้ในฟังก์ชั่นการห่อหุ้ม jQuery ที่รองรับการโยง หวังว่ามันจะเป็นประโยชน์กับใครบางคน:

$.fn.queueAddClass = function(className) {
    this.queue('fx', function(next) {
        $(this).addClass(className);
        next();
    });
    return this;
};

และนี่คือ wrapper removeClass:

$.fn.queueRemoveClass = function(className) {
    this.queue('fx', function(next) {
        $(this).removeClass(className);
        next();
    });
    return this;
};

ตอนนี้คุณสามารถทำสิ่งนี้ - รอ 1 วินาทีเพิ่มรอ 3 วินาที.errorลบ.error:

$('#div').delay(1000).queueAddClass('error').delay(2000).queueRemoveClass('error');

การจัดการ CSS ของ jQuery ไม่ได้อยู่ในคิว แต่คุณสามารถทำให้มันดำเนินการภายในคิว 'fx' โดยทำดังนี้

$('#div').delay(1000).queue('fx', function() { $(this).removeClass('error'); });

ค่อนข้างเหมือนกับการเรียก setTimeout แต่ใช้การคิวคิวของ jQuery แทน

แน่นอนว่ามันจะง่ายขึ้นถ้าคุณขยาย jQuery เช่นนี้:

$.fn.addClassDelay = function(className,delay) {
    var $addClassDelayElement = $(this), $addClassName = className;
    $addClassDelayElement.addClass($addClassName);
    setTimeout(function(){
        $addClassDelayElement.removeClass($addClassName);
    },delay);
};

หลังจากนั้นคุณสามารถใช้ฟังก์ชันนี้เช่น addClass:

$('div').addClassDelay('clicked',1000);

ทำงานล่าช้าในคิว และเท่าที่ฉันรู้การจัดการ CSS (นอกเหนือจากผ่านการเคลื่อนไหว) ไม่ได้จัดคิว

delaysetTimeout()ไม่ทำงานในฟังก์ชั่นคิวไม่มีดังนั้นเราจึงควรใช้

และคุณไม่จำเป็นต้องแยกสิ่งต่าง ๆ สิ่งที่คุณต้องทำคือการรวมทุกอย่างในsetTimeOutวิธีการ:

setTimeout(function () {
    $("#div").addClass("error").delay(1000).removeClass("error");
}, 1000);

ลองสิ่งนี้:

function removeClassDelayed(jqObj, c, to) {    
    setTimeout(function() { jqObj.removeClass(c); }, to);
}
removeClassDelayed($("#div"), "error", 1000);

ลองฟังก์ชั่น arrow ง่ายๆนี้:

setTimeout( () => { $("#div").addClass("error") }, 900 );