jQuery: Tôi có thể gọi delay () giữa addClass () và như vậy không?

Một cái gì đó đơn giản như:

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

dường như không hoạt động. Điều gì sẽ là sự thay thế dễ dàng nhất?

Bạn có thể tạo một mục hàng đợi mới để loại bỏ lớp:

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

Hoặc sử dụng phương pháp dequeue :

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

Lý do bạn cần gọi nexthoặc dequeuelà để cho jQuery biết rằng bạn đã hoàn thành với mục được xếp hàng này và nó sẽ chuyển sang mục tiếp theo.

AFAIK phương pháp trì hoãn chỉ hoạt động đối với sửa đổi CSS số.

Đối với các mục đích khác, JavaScript đi kèm với phương thức setTimeout:

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

Tôi biết đây là một bài viết rất cũ nhưng tôi đã kết hợp một vài câu trả lời vào một hàm bao bọc jQuery hỗ trợ chuỗi. Hy vọng nó mang lại lợi ích cho ai đó:

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

Và đây là một trình bao bọc removeClass:

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

Bây giờ bạn có thể làm những thứ như thế này - đợi 1 giây, thêm .error, đợi 3 giây , xóa .error:

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

Thao tác CSS của jQuery không được xếp hàng, nhưng bạn có thể thực hiện nó bên trong hàng đợi 'fx' bằng cách thực hiện:

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

Khá giống với cách gọi setTimeout nhưng thay vào đó sử dụng mecanism hàng đợi của jQuery.

Tất nhiên sẽ đơn giản hơn nếu bạn mở rộng jQuery như thế này:

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

sau đó bạn có thể sử dụng chức năng này như addClass:

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

Độ trễ hoạt động trên một hàng đợi. và theo như tôi biết thì thao tác css (khác với thông qua hoạt hình) không được xếp hàng.

delaykhông hoạt động trên không có chức năng xếp hàng, vì vậy chúng ta nên sử dụng setTimeout().

Và bạn không cần phải phân tách mọi thứ. Tất cả bạn cần làm là bao gồm mọi thứ trong một setTimeOutphương thức:

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

Thử cái này:

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

Hãy thử funtion mũi tên đơn giản này:

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