Dodawanie klasy za pomocą jQuery po opóźnieniu

Question

Po kliknięciu elementu chcę dodać klasę do elementu body, ale z niewielkim opóźnieniem. Kliknięto element 1, a po 0,5 sekundy ciało otrzymuje nową klasę.

używałem tego, który działa do pewnego stopnia ...

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

Jednak mam innego zdarzenia click, który usuwa tę klasę lewy-bg z organizmu.

Ale następnym razem kliknięcie przycisku "element1 "nie stosuje w ogóle klasy left-bg do ciała.

Mam nadzieję, że ma to sens. Czy ktoś może mi w tym pomóc lub zaproponować inny sposób, aby o tym porozmawiać?

Answer 1

Wyczyść kolejkę:

DEMO

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

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

Answer 2

Trzeba użyć .Zatrzymaj()

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

DEMO

Answer 3

trzeba dequeue

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

jak wspomniano here

Answer 4

wykorzystanie tego -

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

Proszę pamiętać, że opóźnienie może spowodować problem: - naciśnięcie element1 - naciśnięcie innego-elementowa - usuwanie klasy - dodawanie klasy po opóźnieniu

Aby zapewnić wszystko działa poprawnie, trzeba śledzić, co się dzieje, jak należy sprawdzić jeśli klasa jest już na ciała elementu, więc klasa nie nakłada się dwukrotnie:

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

Tutaj możesz przetestować i pokazać kod. http://jsfiddle.net/uTShk/3/

Answer 6

Po ustawieniu musisz mieć ciało stop().

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

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

Fiddle DEMO