D3 Examples - Self-adjusting setTimeout loop

Self-adjusting setTimeout loop

A setTimeout is essentially a polite request to queue code to execute after a specified delay.

The actual delay may vary widely.

This example executes setTimeouts recursively; it compares the ideal time to the actual system time, and adjusts the delay accordingly.

e.g., if the requested delay is 500ms, and the first setTimeout is executed after 510ms, the second setTimeout's delay is adjusted to 490ms, and so on.

The green dots show when each beat event is fired, the red dots show when each measure event is fired.

Uncorrected loops shows a setTimeout with a fixed delay, the same delay as the adjusted setTimeout target.

adapted from:

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>setTimeout deviation</title>
    <style>
      body {
        margin: 0;
        font-family: sans-serif;
        font-size: 16px;
      }
      svg { margin: 10px; }
      .black-bg { background: hsl(0, 0%, 0%); }
      .axis { font-size: 12px; }
      .axis path, .axis line, .tick line {
        fill: none;
        stroke: lawngreen;
        shape-rendering: crispEdges;
        stroke-width: 1.5px;
      }
      .plot text {
        fill: #dadada;
      }
      .tick text {
        fill: lawngreen;
      }
      .dot {
        r: 2;
      }
      .dot.beat { fill: lawngreen; }
      .dot.measure { fill: crimson; }
      .ctrl {
        background: #dadada;
        border-radius: 6px;
        display: inline-block;
        margin: 0 0 0 10px;
        padding: 6px;
      }
      #play-icon {
        border-top: 14px solid transparent;
        border-bottom: 14px solid transparent;
        border-left: 24px solid #777;
        margin: 2px 2px 2px 6px;
        width: 0;
        height: 0;
      }
      #pause-left, #pause-right, #stop-icon {
        background: #777;
      }
      #pause-left, #pause-right {
        float: left;
        margin-top: 4px;
        margin-bottom: 4px;
        width: 8px;
        height: 24px;
      }
      #pause-left {
        margin-left: 6px;
        margin-right: 4px;
      }
      #pause-right {
        margin-right: 6px;
      }
      #play-pause-ctrl.play #pause-icon { display: none; }
      #play-pause-ctrl.pause #play-icon { display: none; }
​
      #stop-icon {
        border-radius: 3px;
        margin: 6px;
        width: 20px;
        height: 20px;
      }
      #logs {
        display:inline-block;
        vertical-align: top;
      }
      .log {
        margin: 0 0 4px 40px;
      }
      #adjusted {
        margin-left: 65px;
      }
      .log div {
        display: inline-block;
        text-align: right;
      }
      .log .label {
        margin-left: 20px;
      }
     .log .num {
        width: 45px;
      }
    </style>
</head>
<body>
  <svg></svg>
  <div>
    <div id="play-pause-ctrl" class="play ctrl">
      <div id="play-icon"></div>
      <div id="pause-icon">
        <div id="pause-left"></div>
        <div id="pause-right"></div>
      </div>
    </div>
    <div id="stop-ctrl" class="ctrl">
      <div id="stop-icon"></div>
    </div>
    <div id="logs">
      <div id="uncorrected" class="log">
        Uncorrected loops: <div class="count num">0</div><div class="label">deviation: </div><div class="dev num">0</div>ms<div class="label">max: </div><div class="max num">0</div>ms
      </div>
      <div id="adjusted" class="log">
        Adjusted loops: <div class="count num">0</div><div class="label">deviation: </div><div class="dev num">0</div>ms<div class="label">max: </div><div class="max num">0</div>ms
      </div>
    </div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="plot.js"></script>
</script>
</body>
</html>
    