javascript - js の「for」ループでのパフォーマンスを改善する

Question

そこで、360 回の反復で終了するループ内の要素のクラス (3 つのセット) を切り替えるための最良の方法に関するアドバイスを探しています。ネストされたループを回避し、優れたパフォーマンスを確保しようとしています。

私が持っているもの：

// 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、間隔を置いて 3 つのクラス切り替えがあることがわかります。私はテストしていませんが、そのframes値が数千になるとパフォーマンスが低下することを懸念しています (そうなる可能性があります)。

このスニペットには明らかに欠陥があります (非常に)。これを a) 機能、b) 効率的に機能させるために何ができるか教えてください。ありがとう ：-）