Question

我是JS和jquery的新手。我在JS中非常快速地编写了一个秒表（精度为0.1秒）代码，看来它可以在10分钟内正常工作。

问题是在10分钟标记后，它一直落后几秒钟（我将其与数字秒表进行了比较），有人可以看到问题吗？

var i = 0,
    desi_s = 0,
    s2 = 0,
    s1 = 0,
    m2 = 0,
    m1 = 0;
$("#start").click(function () {  //calling the start button
    $("#reset").click(function () {  //calling the reset button
        clearInterval(myInt);
        $("#reset").each(function(){
            $(this).html('');    
            this.style.backgroundColor = "transparent";
            this.style.borderColor = "transparent";
        });
        i = 0;
        desi_s = 0;
        s2 = 0;
        s1 = 0;
        m2 = 0;
        m1 = 0;
        $("#min2 ,#min1 ,#sec2 ,#sec1 ,#desi_sec").html(0);
    })
    i++;
    clearInterval(myInt);
    var myInt = setInterval(function () {
        if (i % 2 !== 0) {
            $("#start").html('stop');

            if (desi_s < 9) {
                desi_s++;
                $("#desi_sec").html(desi_s);
            } else {
                desi_s = 0;
                if (s2 < 9) {
                    s2++;
                    $("#sec2").html(s2);
                } else {
                    s2 = 0;
                    $("#sec2").html(s2);
                    if (s1 < 5) {
                        s1++;
                        $("#sec1").html(s1);
                    } else {
                        s1 = 0;
                        $("#sec1").html(s1);
                        if (m2 < 9) {
                            m2++;
                            $("#min2").html(m2);
                        } else {
                            m2 = 0;
                            $("#min2").html(m2);
                            if (m1 < 5) {
                                m1++;
                                $("#min1").html(m1);
                            } else {
                                m1 = 0;
                                clearInterval(myInt);
                            }
                        }
                    }
                }

            }

        } else {
            clearInterval(myInt);
            $("#start").html('start');
            $("#reset").each(function(){
            $(this).html('reset');    
            this.style.backgroundColor = "black";
            this.style.color = "white";
        });
        }
    }, 100);
})

Answer 1

您不能依赖于重复间隔非常精确地相加的时间。间隔仅保证在给定的时间间隔过去后，将尽快调用一个函数，而不能保证它总是那么频繁地发生。如果将一小段时间间隔放在一起，就会慢慢落后于时间。

您应该使用performance.now()作为您的时基。我无法在短篇文章中告诉您如何在上面的代码中使用它（实际上需要重写代码以使其完全清楚），但是希望您能通过查找performance.now()来入门。

PS：我假设它正在Web浏览器上运行。 Node.js没有performance.now()，但是process.hrtime具有类似的功能。

秒表不正确

1 个答案: