title: How to make `setInterval` behave more in sync, or how to use `setTimeout` instead?
body: <p>I am working on a music program that requires multiple JavaScript elements to be in sync with another. I’ve been using <code>setInterval</code>, which works really well initially. However, over time the elements gradually become out of sync which is bad in a music program.</p>
  <p>I’ve read online that <code>setTimeout</code> is more accurate, and you can have <code>setTimeout</code> loops somehow. However, I have not found a generic version that illustrates how this is possible.</p>
  <p>Basically I have some functions like such:</p>
  <pre class="lang-js prettyprint-override"><code>//drums
  setInterval(function {
    //code for the drums playing goes here
  }, 8000);
  
  //chords
  setInterval(function {
    //code for the chords playing goes here
  }, 1000);
  
  //bass
  setInterval(function {
    //code for the bass playing goes here
  }, 500);
  </code></pre>
  <p>It works super well, initially, but over the course of about a minute, the sounds become noticeably out of sync as I’ve read happens with <code>setInterval</code>. I’ve read that <code>setTimeout</code> can be more consistently accurate.</p>
  <p>Could someone just show me a basic example of using <code>setTimeout</code> to loop something indefinitely? Alternatively, if there is a way to achieve more synchronous results with <code>setInterval</code> or even another function, please let me know.</p>