HTML5 / jQuery Metronome - Performance Issues

Question

As mentioned in the title, I am trying to create a jQuery / JavaScript metric, as well as an HTML tag <audio />to play the sound.

It works "well", but it seems to me that the method setIntervaldoes not work accurately enough. I searched for some topics here, but I'm new to jQuery and JavaScript, and I have not found a working solution. The same for "open new tab and setInterval stops or lags" - the problem. I tried to prevent this with help stop(true,true), but it did not work as I expected.

I want the metronome to start “in the background” without changing the tempo when opening a new tab and doing something there. I also want to say exactly the metronome;)

Here is my test environment: http://nie-wieder.net/metronom/test.html

JS-Code and HTML markup are currently in the source of test.html, so you can look there.

In addition, here is the interested (as it seems to me) js code that I use:

$(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 > 4.5) currentCount = 1
                }, delay);
                createMusicTag(ui);
            }
        });
});

Any help would be great, I have no ideas yet.

Answer 1

setInterval is invalid. what you can try is something like:

var timestamp = (new Date()).getTime();
function run() {

     var now = (new Date()).getTime();

     if( now - timestamp >= 1000 ) {
         console.log( 'tick' );
         timestamp = now;
     }

     setTimeout(run, 10);
}
run();

This will (every hundred seconds) compare the “timestamp” with the current time to see if the difference is second or more (deviation is 0.01 seconds), and if these are “ticks” of the logs and resets the current timestamp,

http://jsfiddle.net/rlemon/UqbwT/

-, (imo).

: setTimeout... . http://jsfiddle.net/rlemon/UqbwT/1/

: , javascript.. . .