Can this be created in javascript. A timer?

JavaScript
144

I wanted to bypass that. My idea.

145

What did you want to bypass?

146

Clicking Web Console.

Just seeing it on the seeing it pop up on the screen is simpler.

147

We are not using the console.

148

no, we’re bypassing it.

149

That’s right, and virtually all of that code from post #49 is used when NOT using the console too.

150 
<script>
  var image = document.getElementById('myImage');
  image.addEventListener("load", listener, false);
  }
</script>
151

The listener function needs to contain that command to end the performance measurement.

152 
<script>
        performance.mark("myImage-end");
          function listener() {
     console.timeEnd('Timer1');
         var image = document.getElementById('myImage');
  image.addEventListener("load", listener, false);
  }
</script>
153
154

Nope, that’s all messed up. Go back to the code in post #49 and start again,

155 
    <img id="myTimer" src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDEyMjYgMTQ4MSI+CiAgPHBhdGggZD0iTTAgMTM5NFY4N0MwIDQ2LjMgMTMuMyAxOS44IDQwIDcuNSA2Ni43LTQuOCA5OC43LjMgMTM2IDIzbDEwMzQgNjM0YzM3LjMgMjIuNyA1NiA1MC4zIDU2IDgzcy0xOC43IDYwLjMtNTYgODNMMTM2IDE0NThjLTM3LjMgMjIuNy02OS4zIDI3LjgtOTYgMTUuNS0yNi43LTEyLjMtNDAtMzguOC00MC03OS41eiIgZmlsbD0iIzAwNTlkZCIvPgogPC9zdmc+'>
<script>

  var image = document.getElementById('myTimer');
  image.addEventListener("load", listener, false);

  function listener() {
     console.timeEnd('Timer1');
  }
</script>
156

Okay - remove the console line and replace it with the line to end the performance measurement.

157 
<script>
  performance.mark("myImage-end");

  function listener() {
    console.timeEnd('Timer1');
    


</script>
158 
  var image = document.getElementById('myTimer');
  image.addEventListener("load", listener, false);

  function listener() {
   performance.measure(
    "myImage",
    "myImage-start",
    "myImage-end"
  }
</script>
159

You still haven’t marked the end of the performance, which needs to be the first thing in the listener function.

160

How?

161

You mark the end of the performance with the performance.mark line, which needs to be the first thing that happens in the listener function.

162

performance.mark("myImage-end");

163 
 <style>
   var measures = performance.getEntriesByName("myImage");
    var measure = measures[0];
</style>

<style>
    performance.clearMarks();
    performance.clearMeasures();
    </style>

<style>
    document.getElementById("time").innerHTML = measure.duration
  }, 1000)
}
</style>

<style>
document.getElementById("play").addEventListener("click", onClick);
</style>