タイマーを特定のコードに設定する

Question

このコードを使用してタイマーを設定する。私はそれをどうやって行うのか分かりません。

誰かが私にそれを行う方法を教えてもらえますか？

https://developer.mozilla.org/en-US/docs/Web/API/Performance/measure

// Start with one mark. 
    performance.mark("mySetTimeout-start"); 

    // Wait some time. 
    setTimeout(function() { 
     // Mark the end of the time. 
     performance.mark("mySetTimeout-end"); 

     // Measure between the two different markers. 
     performance.measure(
     "mySetTimeout", 
     "mySetTimeout-start", 
     "mySetTimeout-end" 
    ); 

     // Get all of the measures out. 
     // In this case there is only one. 
     var measures = performance.getEntriesByName("mySetTimeout"); 
     var measure = measures[0]; 
     console.log("setTimeout milliseconds:", measure.duration) 

     // Clean up the stored markers. 
     performance.clearMarks(); 
     performance.clearMeasures(); 
    }, 1000); 

私は例として、この

にタイマーを設定する：

<img src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDEyMjYgMTQ4MSI+CiAgPHBhdGggZD0iTTAgMTM5NFY4N0MwIDQ2LjMgMTMuMyAxOS44IDQwIDcuNSA2Ni43LTQuOCA5OC43LjMgMTM2IDIzbDEwMzQgNjM0YzM3LjMgMjIuNyA1NiA1MC4zIDU2IDgzcy0xOC43IDYwLjMtNTYgODNMMTM2IDE0NThjLTM3LjMgMjIuNy02OS4zIDI3LjgtOTYgMTUuNS0yNi43LTEyLjMtNDAtMzguOC00MC03OS41eiIgZmlsbD0iIzAwNTlkZCIvPgogPC9zdmc+'> 

Answer 1

function onClick() { 
 

 
    // Start with one mark. 
 
    performance.mark("mySetTimeout-start"); 
 

 
    // Wait some time. 
 
    setTimeout(function() { 
 
    // Mark the end of the time. 
 
    performance.mark("mySetTimeout-end"); 
 

 
    // Measure between the two different markers. 
 
    performance.measure(
 
     "mySetTimeout", 
 
     "mySetTimeout-start", 
 
     "mySetTimeout-end" 
 
    ); 
 

 
    // Get all of the measures out. 
 
    // In this case there is only one. 
 
    var measures = performance.getEntriesByName("mySetTimeout"); 
 
    var measure = measures[0]; 
 

 
    // Clean up the stored markers. 
 
    performance.clearMarks(); 
 
    performance.clearMeasures(); 
 
    
 
    document.getElementById("time").innerHTML = measure.duration 
 
    }, 1000) 
 
} 
 

 
document.getElementById("play").addEventListener("click", onClick);

<img id='play' src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDEyMjYgMTQ4MSI+CiAgPHBhdGggZD0iTTAgMTM5NFY4N0MwIDQ2LjMgMTMuMyAxOS44IDQwIDcuNSA2Ni43LTQuOCA5OC43LjMgMTM2IDIzbDEwMzQgNjM0YzM3LjMgMjIuNyA1NiA1MC4zIDU2IDgzcy0xOC43IDYwLjMtNTYgODNMMTM2IDE0NThjLTM3LjMgMjIuNy02OS4zIDI3LjgtOTYgMTUuNS0yNi43LTEyLjMtNDAtMzguOC00MC03OS41eiIgZmlsbD0iIzAwNTlkZCIvPgogPC9zdmc+'> 
 
<div id='time'></div>