javascript - HTML5/jQuery 节拍器 - 性能问题

Question

如标题中所述，我正在尝试创建一个基于 jQuery/JavaScript 的节拍器以及 HTML <audio />标签来播放声音。

它工作“没问题”，但在我看来 setInterval方法不够准确。我在这里搜索了一些线程，但是因为我是 jQuery 和 JavaScript 的新手，所以我还没有找到可行的解决方案。对于“打开新选项卡和 setInterval 停止或滞后”问题也是如此。我试图用 stop(true,true) 来防止这种情况发生但它没有像我预期的那样工作。

我希望节拍器在打开新选项卡并在那里做某事时“在后台”运行而不改变速度。另外我肯定想要一个精确的节拍器 ;)

这是我的测试环境:http://nie-wieder.net/metronom/test.html

目前，JS-Code 和 HTML-markup 都在 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 不准确。你可以尝试做的是:

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

这将(每百分之一秒)将“时间戳”与当前时间进行比较，以查看差异是否为一秒或更多(偏差为 0.01 秒)，如果是则记录“滴答”并重置当前时间戳.

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

这是处理需要时间准确的事情的最佳方法 (imo)。

更新:如果你改变 setTimeout 时间设置......你会得到更少的偏差。 http://jsfiddle.net/rlemon/UqbwT/1/

第二次更新:看完这篇文章后，我认为一定有一种更准确的方法可以在 javascript 中使用计时器。所以经过一些研究，我发现了 this文章。我确实建议你阅读它。