HTML5/jQueryのメトロノーム - パフォーマンスの問題

Question

タイトルで述べたように、私は、HTML <audio />タグとともにjQuery/JavaScriptベースのメトロノームを作成しようとしています。

「大丈夫ですが、私にはsetIntervalメソッドが十分正確に動作していないようです。私はここでいくつかのスレッドを検索しましたが、私はjQueryとJavaScriptの両方が新しく、実用的なソリューションを見つけられませんでした。 "open new tab and setInterval stopsまたはlags"と同じですが、問題です。私はstop(true,true)でそれを防止しようとしましたが、期待通りに動作しませんでした。

新しいタブを開いて何かをやっているときに、テンポを変えずにメトロノームを「バックグラウンドで」走らせたいです。また、私は確かに、正確なメトロノームをしたい。

はここにある私のテスト環境です）：現時点でhttp://nie-wieder.net/metronom/test.html

あなたがそこに見ることができるので、JS-コードとHTMLマークアップは、test.htmlというソースですべてです。

はまた、ここで私が使用して心配（と思うよう）JS-コードは次のとおりです。

$(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); 
      } 
     }); 
}); 

すべてのヘルプは素晴らしいことだ、私は今のアイデアをよ。

Answer 1

setIntervalは正確ではありません。何をやって試すことができることのようなものである：これは、（第2のすべての百分の）diffは二以上（偏差が0.01秒である）であるかどうかを確認するために、現在の時刻と「タイムスタンプ」を比較します

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(); 

現在のタイムスタンプをリセットします。

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

これは（IMO）正確な時間であることが必要なものへの最良のアプローチです。

アップデート：setTimeout時間の設定を変更すると、ずれが少なくなります。 http://jsfiddle.net/rlemon/UqbwT/1/

2回目の更新：この記事をレビューしたところ、JavaScriptを使ってタイマーを使うより正確な方法が必要だと思っていました。少しの研究で私はthisという記事を見つけました。私はあなたがそれを読むことを提案する。