Add a class using jQuery after a delay

问题

When an element is clicked, I want to add a class to the body element, but with a slight delay. So, element1 is clicked, then after .5 seconds, the body is a given a new class.

I was using this which works to an extent...

$('.element1').click(function() {
    $('body').delay(500).queue(function(){
        $(this).addClass('left-bg')
    });
});

However, I have another click event which removes this left-bg class from body.

$('.another-element').click(function() {
    $('body').removeClass('left-bg');
});

But then the next time .element1 is clicked, it doesn't apply the left-bg class to the body at all.

Hope that makes sense. Can anybody help me with this or suggest another way of going about it?

回答1:

Clear the queue:

DEMO

$('.element1').click(function() {
    $('body').delay(500).queue(function(){
        $(this).addClass('left-bg').clearQueue();
    });
});

$('.another-element').click(function() {
    $('body').removeClass('left-bg');
});

回答2:

you need to dequeue

$('.element1').click(function() {
    $('body').delay(500).queue(function(){
        $(this).addClass('left-bg');
        $(this).dequeue()
    });
});

as mentioned here

回答3:

You need to use .stop()

$('.element1').click(function() {
    $('body').stop().delay(500).queue(function(){
        $(this).addClass('left-bg')
    });
});

DEMO

回答4:

use this -

var bgch;
$('.element1').click(function() {
    bgch = setTimeout((function(){$('body').addClass('left-bg');}),500);
});
$('.another-element').click(function() {
    $('body').removeClass('left-bg');
    clearTimeout(bgch);
});

回答5:

Please keep in mind, that your delay can cause a problem: - pressing element1 - pressing another-element - removing class - adding class after delay

To ensure all is working fine, you have to keep track of what is going on, as well as you should check if class is already on body-element, so the class is not applied twice:

var bodyClassTracker = 0;
var handledClass = 'left-bg';

$('.element1').click(function() {
    bodyClassTracker = 1;
    $('body').delay(500).queue(function(){
        var eleBody = $('body');
        if (!eleBody.hasClass(handledClass))
            eleBody.addClass(handledClass);
        bodyClassTracker = 0;
        eleBody.clearQueue();
    });
});

$('.another-element').click(function() {
    var removerFun = function(){
            var eleBody = $('body');
            if (eleBody.hasClass(handledClass))
                eleBody.removeClass(handledClass);
            eleBody.clearQueue();
        };
    if (bodyClassTracker == 1)
        $('body').delay(500).queue(removerFun);
    else
        removerFun();
});

Here you can test and demo the code. http://jsfiddle.net/uTShk/3/

回答6:

You need to stop() the body after setting it.

$('#add').click(function() {
    $('body').delay(500).queue(function(){
        $(this).addClass('left-bg')
    }).stop();
});

$('#rem').click(function() {
    $('body').removeClass('left-bg');
});

Fiddle DEMO

来源：https://stackoverflow.com/questions/17878478/add-a-class-using-jquery-after-a-delay

标签

jquery

delay