"Resource Timing" spec error

by moorsiek

HTML

<p>
    A click on the left button doesnt result in a "alert" call, but the right one does.
</p>
<button onclick="loadResources();">loadResources (with bug)</button>
<button onclick="loadResources_fixed();">loadResources fixed</button>

JavaScript

window.loadResources = loadResources;
window.loadResources_fixed = loadResources_fixed;
function loadResources() 
{
   var start = new Date().getTime();
   var image1 = new Image();
   //resourceTiming is already declared, but has no
   //any value assigned to it, so it's >undefined<
   image1.onload = resourceTiming;
   image1.src = 'http://www.w3.org/Icons/w3c_main.png';
   //here resourceTiming obtains a value (function), but
   //it's late
   var resourceTiming = function() {
       var now = new Date().getTime();
       var latency = now - start;
       alert("End to end resource fetch: " + latency);
   };
}

function loadResources_fixed() 
{
   //okay now, "start" - is in a closure
   var resourceTiming = function() {
       var now = new Date().getTime();
       var latency = now - start;
       alert("End to end resource fetch: " + latency);
   };
    
   var start = new Date().getTime();
   var image1 = new Image();
   image1.onload = resourceTiming;
   image1.src = 'http://www.w3.org/Icons/w3c_main.png';
}