title: Why are set timeouts invalidated by a page reload and how to avoid it?
body: <p>I have a website which I automatically navigate on a loop using Javascript to imitate a user's actions.</p>
  
  <p>For the cases when something goes wrong and the loop stops working, I have a failsafe mechanism. On each iteration the following code is executed:</p>
  
  <pre><code>var failsafe = function () {
      console.log("Something went wrong, reloading...");
  
      window.location.reload();
      document.failsafeTimeout = setTimeout(failsafe, 60000);
  };
  
  if (document.failsafeTimeout !== undefined) {
      // the previous iteration went fine, clearing the old timeout
  
      clearTimeout(document.failsafeTimeout);
  }
  
  document.failsafeTimeout = setTimeout(failsafe, 60000);
  </code></pre>
  
  <p>The problem is, the code doesn't work as I expect. When the loop breaks, the failsafe handler is called once, but, despite being set again, is never called again. After the failsafe handler finishes executing, <code>document.failsafeTimeout</code> is <code>undefined</code>. I assume that <code>window.location.reload()</code> works asynchronously, which destroys the <code>failsafeTimeout</code> property after it's been assigned.</p>
  
  <p>How do I rewrite the failsafe timeout handler so that it could set a new timeout which would survive the page reload?</p>