0

因此，我正在寻找有关在以 360 次迭代结束的循环中切换元素的类（三个一组）的最佳方法的一些建议。我试图避免嵌套循环，并确保良好的性能。

是）我有的：

// jQuery flavour js
// vars
var framesCount = '360'; // total frames
var framesInterval = '5000'; // interval
var statesCount = 3; // number of states
var statesCountSplit = framesInterval/statesCount;
var $scene = $('#scene');
var $counter = $scene.find('.counter');    

// An early brain dump
for (f = 1; f < framesCount; f += 1) {
  $counter.text(f);
  for (i = 1; i < statesCount; i += 1) {
    setTimeout(function() {
        $scene.removeClass().addClass('state-'+i);
      }, statesCountSplit);
    }
}

因此，您会看到，对于 360 中的每一个，每frames隔一段时间就会有三类切换。尽管我还没有测试过，但我担心一旦该frames值达到数千（它可能），这里的性能会受到影响。

这个片段显然有缺陷（非常），请让我知道我能做些什么来使这个 a) 工作，b) 有效地工作。谢谢 ：-）

4

2 回答 2

1

一些一般性建议：

1) 不要在循环中声明函数

这真的需要在 setTimeout 中完成吗？

for (i = 1; i < statesCount; i += 1) {
    setTimeout(function() {
        $scene.removeClass().addClass('state-'+i);
    }, statesCountSplit);
}

2) DOM 操作代价高昂

这真的有必要吗？这将切换得如此之快，以至于您不会注意到计数器上升。我不明白这里的意图，但似乎没有必要。

$counter.text(f);

3）不要过早优化

在你的问题中，你说你没有分析有问题的代码。目前，只有大约 1000 次迭代，这应该不会那么糟糕。DOM 操作并不算太糟糕，只要您不插入/删除元素，而您只是修改它们。

在这一点上，我真的不担心性能。您可以应用其他微优化（例如将 for 循环更改为递减的 while 循环以保存比较），但您没有表明性能存在问题。

结束的想法

如果我正确理解逻辑，那么您的代码与它不匹配。代码当前将.counter随着处理器迭代循环的速度增加（应该只需要几毫秒左右），并且每个“类切换”将在彼此的几毫秒内触发 360 次。

先修复你的逻辑错误，然后再考虑优化如果它成为一个问题。

于 2013-03-20T06:00:50.387 回答
0

不要为此使用 for 循环。这将产生大量已知会减慢浏览器速度的 setTimeout 事件。请改用单个 setTimeout：

function animate(framesCount, statesCount) {
     $scene.removeClass().addClass('state-'+statesCount);
     if (framesCount) {
         setTimeout(
             function(){
                 animate(framesCount-1,(statesCount%3)+1);
             },
             statesCountSplit
         );
     }
}

animate(360*3,1);
于 2013-03-20T06:00:21.617 回答