javascriptを使用して設定された間隔でスタイルを動的に変更するにはどうすればよいですか？

Question

javascriptを単独で使用してアニメーション効果を作成するために、特定の間隔の後に要素にスタイルを動的に追加しようとしています。私はsetInterval（）を使用しているし、clearInterval/stopを停止できません。また、メソッドに割り当てられている間隔では発生しません。アニメーションは1〜2秒ごとに発生しているようです。ここで

私がこれまで試した何のためのコードです：http://codepen.io/AnkitaSood/pen/jyaqMR?editors=0010

以下

は私が助けを必要とロジックです -

Object.keys(styles).forEach(function(key) { 
    for(index = 0 ; index < styles[key].length; index++) { 
     var intervals = setInterval(function(index) { 
     elem.style[key] = styles[key][index]; 
     }, timer[index], index); 
    } 
    clearInterval(intervals); 
    }); 

Answer 1

あなたのコードが動作しない理由が理由だけで、最後ですintervalsがクリアされました（あなたのコードはそれを上書きし続けます）。しかし、たとえ修正しても、変更が起こる前に、clearIntervalが直ちに間隔をクリアする可能性があるため、期待通りに動作しません。

だから私が代わりにsetTimeoutを示唆している：

this.animate = function() { 
    for(index = 0 ; index < timer.length; index++) { 
     setTimeout(function(index) { 
     for (var key in styles) { 
      elem.style[key] = styles[key][index]; 
     } 
     }, timer[index], index); 
    } 
}; 

Answer 2

私は問題はあなたがループ内setIntervalを呼び出しているということだと思います。 1つのコールsetIntervalが既にループしているので、その必要はありません（xミリ秒ごとにコールバックが呼び出されます）。あなたのコードは実際には間隔の束を開始し、おそらく1つしか必要ありません。

私は少しこのようにそれを修正し、いくつかの合理的な結果を得た：

this.animate = function() { 
    var i = 0; 

    setInterval(function() { 
     elem.style['width'] = config.styles.width[i]; 
     elem.style['backgroundColor'] = config.styles.backgroundColor[i]; 
     i = ++i % 6; 
    }, 1000); 
}; 

これは単に何度も何度もアニメーションを実行しますが、うまくいけば、それは働くことができる方法を示しています。特定の回数ループした後でインターバルを止めたい場合は、次のようにすることができます。

this.animate = function() { 
    var i = 0; 

    var intId = setInterval(function() { 
     elem.style['width'] = config.styles.width[i]; 
     elem.style['backgroundColor'] = config.styles.backgroundColor[i]; 

     if(++i >= 6) { 
     clearInterval(intId); 
     } 
    }, 1000); 
};