JavaScript / jQuery: How to properly use setTimeout before redirect

Question

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

score 4 · Accepted Answer · answered Jun 29 '15 at 18:46

4

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

answered Jun 29 '15 at 18:46

Dhiraj

33,140
10
61
78

Awesome - thanks a lot ! Exactly what I was looking for. Will accept as soon as I can. :) – keewee279 Jun 29 '15 at 18:51

Devon Holcombe · Answer 2 · 2015-06-29T19:09:02.293

1

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.

edited Jun 29 '15 at 19:09

answered Jun 29 '15 at 18:54

Devon Holcombe

518
1
5
18

Thanks a lot for this as well ! Could you give me some hints on what you mean by "standardized" ? Since I am new to programming it would help me to do things right from the start. :) – keewee279 Jun 29 '15 at 19:00
1

The current ECMAscript (which standardizes what was originally and still most often referred to as JavaScript) standard is located here http://www.ecma-international.org/ecma-262/6.0/. If you're new, it won't likely do you much good as it's complex reading. That's version 2015 (aka 6). Most browsers still only support version 5. A good resource for determining browser support for a particular feature is at http://caniuse.com/ – Devon Holcombe Jun 29 '15 at 19:05
Thanks for this - I tested your code and it works, just looks like you might have to remove a curly bracket at the end. Regarding the browser support, which modern browser would have issues with the setTimeout approach ? Would delay be a better option ? – keewee279 Jun 29 '15 at 19:07
1

http://stackoverflow.com/questions/8852198/settimeout-if-not-defined-in-ecmascript-spec-where-can-i-learn-how-it-works explains why setTimeout is not a part of ECMAScript. – Dhiraj Jun 29 '15 at 19:16
@DhirajBodicherla: Thanks for this ! – keewee279 Jun 29 '15 at 19:18

JavaScript / jQuery: How to properly use setTimeout before redirect

2 Answers2