CODEWITHSUNDEEP
javascriptjquerysettimeout
keewee279
keewee279

Reputation: 1654

JavaScript / jQuery: How to properly use setTimeout before redirect

I am new to JS and hope someone can help me with this.

I am trying to fade out a div, then wait two seconds and then redirect to another page.

So far I have the following which does the redirect as required but I don't think I am using the setTimeout correctly since the redirect always happens immediately independent of the value I set for the timeout.

Can someone tell me how I have to combine this so that JS waits before the redirect ? I would like to use setTimeout rather than delay etc., if possible. 

setTimeout(function(){ $(that).closest('div.boxBlueOuter').fadeOut(), 2000 });
// redirect to index page
window.location.href = baseURL + '/index.php?lang=' + selectedLang;

Many thanks in advance, Mike

Upvotes: 1

Views: 527

Answers (2)

Devon Holcombe
Devon Holcombe

Reputation: 528

setTimeout is unfortunately not part of the actual EcmaScript specification so it's behavior may not be consistent across execution environments.

That said according to https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

setTimeout in Firefox will execute the function passed in after the specified delay. Currently you are specifying to fadeout after a 2 second delay. Instead you want to redirect after the 2 second delay like this

$(that).closest('div.boxBlueOuter').fadeOut()

setTimeout(function(){ window.location.href = baseURL + '/index.php?lang=' + selectedLang;}, 2000 );

I would recommend using something standardized though and avoid setTimeout.

Upvotes: 1

Dhiraj
Dhiraj

Reputation: 33618

.fadeOut() can take a callback and this is how it looks like

.fadeOut( [duration ] [, complete ] )

First use fadeout and in the callback have a timeout for 2 seconds and then redirect. Something like this should do.

$(that).closest('div.boxBlueOuter').fadeOut(function(){
  setTimeout(function(){
    window.location.href = baseURL + '/index.php?lang=' + selectedLang;
  }, 2000);
});

Upvotes: 4

Related Questions