Question

所以我正在寻找一些关于在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）高效工作。谢谢： - ）

Answer 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次其他

首先修复您的逻辑错误，然后担心如果它成为问题则进行优化。

Answer 2

不要为此使用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);

提高js`for`循环的性能

2 个答案:

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

2）DOM操作很昂贵

3）不要早期优化

结束思路