javascript - 快速点击会减慢 Android chrome 上的计时器速度

Question

我有一个迷你游戏，要求用户在给定时间(8 秒)内快速单击按钮。有一个倒计时(以毫秒为单位)。当我尝试使用 Android 触摸屏(我认为使用 Android Table OS6)时，我遇到了计时器在快速点击时变慢的情况。有没有办法避免或提高这种情况的性能？这是倒计时器，我认为可以改进吗？不确定 GSAP 是否有助于取代 setinterval 在这件事上？

function countDownNow(){
        // var initial = 800;
        var initial = 8000;
        var count = initial;
        var counter; //10 will  run it every 100th of a second

        function timer() {

            if (count <= 0) {
                console.log(done)

                clearInterval(counter);
                return;
            }
            count--;
            displayCount(count);
        }

        function displayCount(count) {
            var res = count / 100;
            //document.getElementById("countdown").innerHTML = res.toPrecision(count.toString().length) ;
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            ctx.fillStyle = '#fff';
            ctx.font = '90px "Conv_DIN-Bold"';
            var text_title = "first";
            ctx.fillText(res.toPrecision(count.toString().length), 15, canvas.height / 2 + 35);

        }
        counter = setInterval(timer, 10);


        displayCount(initial);   
}

HTML

<!-- Skeleton html -->
<div id="countdown"></div>



<!-- this clickme button is the button where its being used for user to rapidly click it-->
<div class="clickme"></div>

Answer 1

正如 my answer to your last post 中所述、setIntervals 应该避免，特别是当您必须使用它们来精确计时时，尤其当您已经在使用 GSAP 时。如果您使用的是 GSAP，则没有理由使用它们。

对于像这里这样的功能，它没有理由表现不佳。两个最大的性能影响是 1) 使用一堆 setInterval 和 2) 在函数中包含函数。

当函数内有函数时，每次运行函数时都会创建它们。如果这些外部函数被多次调用，那么您创建内部函数的次数通常会超出您的需要。为了避免这种情况，请将内部函数移到外部函数之外，并在需要时使用参数传递变量。 (在内存管理方面，一个小的改进是将不会改变的变量移到函数之外，但这并不重要)

另一个注意事项是，您创建的间隔都会相互覆盖，但您不会杀死旧的间隔。因此，您应该删除之前创建的任何内容，因为无论如何都看不到它们的输出(因为它被新的输出覆盖)。

总共你会得到这样的结果:demo .