1

When does Javascript execution in a browser stop after navigating to a new html page? Will the line after

window.location = "index.html";

still be executed? Does the function containing this line return? When there is a XMLHttpRequest running, will the onreadystatechange callback still be called after the page with the callback code has been left? Or the callback of a setTimeout call? Is this well defined?

Gerhard
  • 1,342
  • 2
  • 12
  • 23
  • 1
    Why don't you try it yourself and see.. – Zee May 04 '15 at 07:27
  • @Sourabh- Because he is not asking for *implementation* behaviour, but *theoretical* behaviour/definedness. – Siguza May 04 '15 at 07:30
  • I need something I can rely on (different browsers or versions), I was checking documentation, but didn't find the answer. – Gerhard May 04 '15 at 07:32
  • @Siguza. He asked whether the line will still be _executed?_ . Thats more of _implementation_ behaviour than _theoretical_. – Zee May 04 '15 at 07:35
  • 1
    It is difficult to check, because when an "alert" is not displayed, it doesn't mean it is not executed. Maybe only the display is suppressed. – Gerhard May 04 '15 at 07:36
  • @Gerhard. I second that. This question is similar http://stackoverflow.com/questions/10525584/what-happens-to-code-after-a-javascript-redirect-setting-window-location-href – Zee May 04 '15 at 07:40

1 Answers1

4

When you navigate to a new page, the existing page is shut-down completely. The Javascript context is stopped and thrown away. Whether this shut-down happens immediately, after a few lines of code, after a bunch of lines of code is completely variable. It likely has to do with some async timing while the new page loading is initiated.

Over the years there has been some slight difference in how some browsers treated the next few lines of code after setting a new location, but you should never count on any lines executing after you set a new location because setting a new location is telling the browser to shut down this page and start loading a new one.

A quick test in Chrome shows that an alert() on the very next line does execute and wait for user input before it finishes loading the next location, but this is undocumented behavior and is not safe to count on.

In Firefox, the alert briefly flashes on screen, but does not wait for user input and the new page is loaded.

The smart way to code is to not place any code after setting the window.location. That way, you will not be relying on a behavior that varies among browsers and all browsers will behave the same with your code. If you want to execute something else, then do it BEFORE you change the window.location. Or, if you want your current block of code to finish executing, then change the location in a setTimeout() as in:

setTimeout(function() {
    window.location = "http://www.stackoverflow.com";
}, 1);

This would then reliably let the current thread of execution finish before the page was changed to a new location because setTimeout() works via an event queue and it's event won't be processed until after the current thread of execution is done (no matter how long it takes to complete).

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • 1
    I wouldn't rely on the timeout, if there is lengthy code following. This following code, I think, might as well be interrupted by the timeout function. – Gerhard May 04 '15 at 07:39
  • 1
    @Gerhard - Javascript in a browser is single threaded (except for webWorkers which are not involved in this discussion). A timer will NEVER interrupt a running thread of execution in Javascript. When it is time for a timer to fire, an event is added to the Javascript event queue and that event is then processed ONLY when the current thread of execution is done and the next event is popped off the queue. See [this post](http://stackoverflow.com/questions/7575589/how-does-javascript-handle-ajax-responses-in-the-background/7575649#7575649) for more reference material on the subject. – jfriend00 May 04 '15 at 07:47
  • @Gerhard - so a `setTimeout()` will always occur AFTER the current thread of execution is done when the next event on the event queue is processed. This is a fundamental aspect of how Javascript event management and sequencing is designed and built. Lots of code depends upon this behavior. – jfriend00 May 04 '15 at 07:52