延迟后使用jQuery添加一个类

单击一个元素时，我想向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() }); }); 

如这里提到的

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

请记住，您的延迟可能会导致问题 ： – 按下element1 – 按另一个元素 – 删除类 – 延迟后添加类

为了确保所有工作正常，您必须跟踪正在发生的事情，并且您应该检查类是否已经在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

您需要在设置后停止（）身体。

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

小提琴演示