2

我一直在开发一个动画 Spotify 应用程序，并且遇到了口吃问题。在尝试尽可能地减少动画代码但仍然遇到卡顿后，我删除了除了 setTimeout 函数之外的所有内容。在调试器中观察时间线确认卡顿仍然存在。

为了测试这个问题，我编写了以下代码片段并在 Spotify 和 chrome 中运行它：

var delta;
var newTime;
var oldTime = new Date().getTime();
var startTime = new Date().getTime();
function updateFrame() {
    newTime = new Date().getTime();
    delta = newTime - oldTime;
    if (delta>500 ) {
        console.log(delta + " @ " + Math.round((newTime-startTime)/1000) + " seconds");
    }
    oldTime = newTime;
    setTimeout("updateFrame()",50);
}

在 spotify 中，典型的输出如下所示：

 2168 @ 14 seconds
 2150 @ 51 seconds
 2151 @ 111 seconds
 2166 @ 171 seconds
 2174 @ 231 seconds
 2194 @ 291 seconds
 2181 @ 351 seconds
 2259 @ 411 seconds
 2216 @ 471 seconds

在这两秒钟内，整个 Spotify UI 完全没有响应，而音乐继续播放并记录了击键。使用 setInterval，不同的 setTimeout 间隔，以及在更新函数中更改 setTimeout 的位置，似乎都没有任何效果。

在 chrome 中，在选项卡变为非活动状态之前不会记录任何内容：

 1002 @ 9 seconds 
 1001 @ 10 seconds 
 1000 @ 11 seconds 
 1001 @ 12 seconds 
 1003 @ 13 seconds 
 1000 @ 14 seconds 
 1006 @ 15 seconds

我不知道如何解决这个问题——我觉得我做错了什么，因为我用过的其他应用程序都冻结了 Spotify。这可能是因为它们不包括持久的 setTimeout 调用，但我不确定如何在没有它们的情况下创建动画。

4

0 回答 0