title: HTML5/jQuery metronome - performance problems
body: <p>As mentioned in the title I'm trying to create a jQuery/JavaScript based metronome along with the HTML <code>&lt;audio /&gt;</code> tag to play the sound. </p>
  
  <p>It works "okay", but it seems to me the <code>setInterval</code> method is not working accurately enough. I searched some threads here, but for I am new to both jQuery and JavaScript and I haven't found a working solution. Same for the "open new tab and setInterval stops or lags" - problem. I tried to prevent that with <code>stop(true,true)</code> but it didn't work as I expected. </p>
  
  <p>I want the metronome to run "in background" without changing tempo when opening a new tab and doing something there. Also I want an exact metronome for sure ;)</p>
  
  <p>Here's my testing environment located: <a href="http://nie-wieder.net/metronom/test.html" rel="noreferrer">http://nie-wieder.net/metronom/test.html</a></p>
  
  <p>At the moment, JS-Code and HTML-markup are all in the test.html source, so you can look there.</p>
  
  <p>Also, here's the concerned (as I think) js-code I use:</p>
  
  <pre><code>$(document).ready(function() {
  
      //vars
      var intervalReference   = 0;
      var currentCount        = 1;      
      var countIncrement      = .5;      
      var smin = 10;
      var smax =240;
      var svalue = 120;
  
      //soundchkbox
      $(".sndchck").attr("disabled", true);
  
      //preload sound
      $.ajax({
          url: "snd/tick.ogg",
          success: function() {
              $(".sndchck").removeAttr("disabled");
          }
      });
  
      // tick event
      var met = $("#bpm").slider({
              value: 120,
              min: smin,
              max: smax,
              step: 1,
              change: function( event, ui ) {
                  var delay = (1000*60/ui.value)/2
                  clearInterval(intervalReference);
  
                  //seems to be the Problem for me
                  intervalReference = setInterval(function(){
                      var $cur_sd = $('#sub_div_'+currentCount);
                      $cur_sd
                      .stop(true,true)
                      .animate({opacity: 1},15,
                                  function() {
                                  //Play HTML5 Sound
                                  if($('#sound_check:checked').val()){
                                      $('#tick')
                                      .stop(true,true)
                                      .trigger("play");
                                  }
                                      $(this).
                                      stop(true,true).
                                      animate({opacity:0});
                                  }
                      );
                      currentCount += countIncrement;
                      if(currentCount &gt; 4.5) currentCount = 1
                  }, delay);
                  createMusicTag(ui);
              }
          });
  });
  </code></pre>
  
  <p>Any help would be great, I'm out of ideas for now.</p>