Question

单击一个元素时，我想在body元素中添加一个类，但稍有延迟。因此，单击element1，然后在.5秒后，正文将被赋予一个新类。

我正在使用它，这在某种程度上起作用......

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

但是，我有另一个click事件，它从body中删除了这个left-bg类。

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

但是下次单击.element1时，它根本不会将left-bg类应用于正文。

希望这是有道理的。任何人都可以帮我解决这个问题或提出另一种方法吗？

Answer 1

清除队列：

DEMO

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

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

Answer 2

你需要出队

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

如上所述here

Answer 3

您需要使用.stop（）

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

<强> DEMO

Answer 4

使用此 -

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

Answer 5

请注意，您的延迟可能导致问题： - 按元素1 - 按另一个元素 - 删除课程 - 延迟后添加课程

为了确保一切正常，你必须跟踪发生了什么，以及你应该检查如果类已经在body-element上，那么这个类不会被应用两次：

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();
});

在这里，您可以测试和演示代码。 http://jsfiddle.net/uTShk/3/

Answer 6

设置后需要stop()身体。

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

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

Fiddle DEMO

延迟后使用jQuery添加一个类

6 个答案: