jQuery toggle class with delay works only once

问题

I am clearly missing something fundamental when it comes to jQuery, anonymous functions, and delays.

The following code works only ONCE per page load (it will add the class, then remove it after 1 second, and if i click again, it will add the class, but will NEVER remove the class for the duration of the page, unless I reload the page):

var jElement = $(currElem);
jElement.addClass("highlight")
.delay(1000)
.queue(function(){
$(this).removeClass("highlight");
});

HOWEVER,

if I add the (non-existant) function call as a parameter, AND I call it in my anonymous function, then the add/remove class combination will work indefinitely.

var jElement = $(currElem);
jElement.addClass("highlight")
.delay(1000)
.queue(function(randomFunction){
$(this).removeClass("highlight");
randomFunction(); //this makes it seemingly 'miraculously' work??
});

Side Note:

var jElement = $(currElem);
jElement.addClass("highlight")
.delay(1000)
.queue(function(randomFunction){
$(this).removeClass("highlight");
// this does NOT work; if I dont actually call the 'randomFunction'
// so that function, even though it does nothing; must somehow cause 
// the implicit call of 'dequeue()' ??
});

回答1:

There is no miracle there. This behavior it's written in the documentation of .queue().

Note that when adding a function with .queue(), we should ensure that .dequeue() is eventually called so that the next function in line executes.
$('#foo').slideUp().queue(function() {
  alert('Animation complete.');
  $(this).dequeue();
});
As of jQuery 1.4, the function that's called is passed another function as the first argument. When called, this automatically dequeues the next item and keeps the queue moving. We use it as follows:
$("#test").queue(function(next) {
    // Do some stuff...
    next();
});

回答2:

the randomFunction is actually referred to as next and references the .dequeue method. Calling it causes the queue to continue on to the next item in the queue.

http://api.jquery.com/queue/

来源：https://stackoverflow.com/questions/14883740/jquery-toggle-class-with-delay-works-only-once

标签

javascript

jquery

anonymous-function