JavaScript setInterval函数替代

Question

我刚刚开发了一个JS游戏，它有太多的setIntervals而无法调用函数。间隔产生了不可接受的闪烁效果。我想请教专家，如果我采用setInterval调用的替代方法，我能不能让它变得更流畅，因为它也很流畅？

看看这个游戏http://umairashraf.net23.net/booble/

Answer 1

你没有“递归调用”。你已经创建了很多计时器。为每个新的气泡创建一个新的计时器！每20毫秒就会触发上百个回调函数！在这些调用中，您需要执行以下操作

$(bubble).offset().top;
    if (pos >= 0 - $(bubble).height()) {
        $(bubble).css({ top: (pos - 1000) + "px" });
    }

构造一个jquery对象(3次！)，计算它的偏移量，查询它的高度...一百次，每隔20毫秒！

对于每个创建的气泡，都应该缓存它的jquery对象和当前位置。将它们保存在数组或散列中: bubbleJqueryObjects和bubblePositions。使成为一个单独的 animateBubbles()回调，它将一次性更新所有现有气泡的“”css属性。保存5,000个函数调用，15000个jquery对象构造和5,000个位置大小查询。每一秒。

Answer 2

您可以查看Composite design pattern。它是一种流行的设计模式，用于处理分层类型的数据并能够以快速的方式对其进行查询。

Answer 3

我怀疑你的性能问题是，对于每个气泡，你创建了一个新的动画函数，每20ms执行一次。这就是大量频繁执行的函数。

您可以通过将所有气泡保存在一个数据结构中，并使用一个函数(每20ms执行一次)来一次性更新所有气泡，从而提高性能。