jQuery delay function interrupt

问题

I have a pop-up window in jQuery that fades in, and will fade out in 10 seconds if not dismissed by the user.

I have the code:

$modalElement.fadeIn(1000).delay(10000).fadeOut(1000);

And this works fine for the fade in, delay and fade out - but the 'close' button on the form doesnt work until after the timeout!

I need the 'close' button to interupt the delay, so that the user can read the pop up and close it themselves, say, at 5 seconds - and then if they havent closed it themselves, then it will close automatically after the 10 second delay.

Any ideas how to do this?

回答1:

You can use the .clearQueue() method.

In your close handler you can do this:

$modalEleement.clearQueue();

By default, both .delay() and .clearQueue() operate on the fx queue, but you can pass custom queue names.

回答2:

Just add a click event on the close button with a dequeue.

For example:

$modalElement.fadeIn(1000).delay(10000).fadeOut(1000);

$modalElement.find('a.close').click(function(){
  // If you want fadeout being triggerd
  $modalElement.dequeue() 
  // If you just want to delete the box without the fadeOut
  $modalElement.remove() 
});

来源：https://stackoverflow.com/questions/10944830/jquery-delay-function-interrupt