title: call function after load event end
body: <p>I'm working with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API" rel="nofollow">Navigation timing object</a> to calculate full page delay between navigation start and load event end.</p>
  
  <p>My goal is to get <code>performance.timing.loadEventEnd - performance.timing.navigationStart;</code> when load event is done.</p>
  
  <p>However, invoking this code inside load event, load event end can not be measured. So, I need to defer it and run outside of load event.</p>
  
  <p><strong>Here are my requirements</strong></p>
  
  <ol>
  <li>calling <code>myfunction</code> after load event ends.</li>
  <li>I don't want to use timing function like <code>setTimeout</code>. If <code>setTimeout</code> guarantee that it does not wake up during other load event, it is ok to use.</li>
  <li>I don't want to calculate time delay inside <code>load</code> event. (like call <code>new Date().getTime()</code> or <code>performance.now()</code> at the top of <code>load</code> event, and call it again before finish and subtract it.) Because I use bunch of 3rd party library which also call load event. I can't handle all of them.</li>
  <li>should work cross browser environment, IE>=10</li>
  </ol>
  
  <pre class="lang-js prettyprint-override"><code>$(window).ready(function(){
      console.log("domContentLoadedEventStart: "
          +performance.timing.domContentLoadedEventStart);
      console.log("domContentLoadedEventEnd: "
          +performance.timing.domContentLoadedEventEnd);
  });
  // result:
  // &gt; domContentLoadedEventStart: 1451979544555
  // &gt; domContentLoadedEventEnd: 0
  
  $(window).load(function(){
      console.log("domcomplete: "+performance.timing.domComplete);
      console.log("loadEventStart: "+performance.timing.loadEventStart);
      console.log("loadEventEnd: "+performance.timing.loadEventEnd);
  });
  // result:
  // &gt; domcomplete: 1451979906417
  // &gt; loadEventStart: 1451979906417
  // &gt; loadEventEnd: 0
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>I've tested this suites. This test cases were intended to wake up <code>setTimeout</code> during load function callback.</p>
  
  <pre class="lang-js prettyprint-override"><code>// myfunction which will be called by setTimeout in firstLoadCallback.
  function myfunction(){
      console.log("called myfunction");
  }
  
  // first load callback
  $(window).load(function firstLoadCallback(){
      var startTicks = performance.now();
  
      // register myfunction with setTimeout
      setTimeout(myfunction, 0);
  
      // sleep +500ms
      while(performance.now() - startTicks &lt; 500){
          ;
      }
  
      var diffTicks = performance.now() - startTicks;
  
      console.log("first ticks: "+diffTicks);
  });
  
  // second load callback
  $(window).load(function secondLoadCallback(){
      var startTicks = performance.now();
  
      // sleep +500ms
      while(performance.now() - startTicks &lt; 500){
          ;
      }
  
      var diffTicks = performance.now() - startTicks;
  
      console.log("second ticks: "+diffTicks);
  });
  
  // third callback from other file: other-file.js
  $(window).load(function thirdLoadCallback(){
      var startTicks = performance.now();
  
      // sleep +500ms
      while(performance.now() - startTicks &lt; 500){
          ;
      }
  
      var diffTicks = performance.now() - startTicks;
  
      console.log("third ticks: "+diffTicks);
  });
  
  // result:
  // first ticks: 500.005
  // second ticks: 500.0050000000001
  // third ticks: 500.0049999999999
  // called myfunction
  </code></pre>
  
  <p>From this result, callback which registered by <code>setTimeout</code> does not wake up before function call tree end. If this result guarantee of working cross browser, @BenjaminGruenbaum answer might be correct.</p>
  
  <p>I will post another question about it.</p>