複数の処理を時間差でエンドレスに実行する方法

###実現したいこと
ページの背景色が一定時間ごとに延々と切り替わるページを作りたいと思っています。

春（ピンク）→夏（赤）→秋（茶）→冬（青）
→再び春（ピンク）を表示・・・エンドレスに実行

###前提

異なる処理を時間差で実行する場合はどのように記述するのが良いのでしょうか？

色々とネットで調べているとコールバック地獄に陥らないためにはES6の「Promiseオブジェクト」を使うのがいいという記事を見かけました。
自分なりに記述をしてみて１回だけ処理をまわすところまではできました。
これを繰り返し実行するにはどのように記述をしたら良いでしょうか。

もしくはもっと他に良い選択肢がありましたら教えていただけないでしょうか？

####知りたいこと
１つだけお答えいただくのでも構いませんのでどうぞ宜しくお願い申し上げます。

質問の仕様のような複数の処理をエンドレスに実行する場合の記述の仕方
Promiseで記述する選択は良いのか？また繰り返し（再帰？）ができるのか
もしPromiseの記述の仕方に誤りがあればご指摘いただけると助かります。
そもそもの話ですが、何かをエンドレスに実行させること自体タブーであったりしますか？

　検索をすると必ず何かの条件で終了するように記述がされている印象を受けました。

HTML
1	<body>
2		<div id="container" class="spring">
3		背景色を<br>
4		春（ピンク）→夏（赤）→秋（茶）→冬（青）<br>
5		にエンドレスに変化させたい。
6		</div>
7	<script src="script.js"></script>
8	</body>

css
1.spring { background-color: pink; }
2.summer { background-color: red; }
3.autumn { background-color: brown; }
4.winter { background-color: blue; }

JavaScript
1//Promiseオブジェクト　1回実行させるところまでしかできていない
2	let container = document.getElementById('container');
3
4
5	function changeSeason (season) {
6		return new Promise((resolve, reject) => {
7			setTimeout(() => {
8				if(season) {
9					resolve(
10						container.className = season
11					);
12				} else {
13					reject();
14				}
15			}, 3000);
16		});
17	}
18
19	changeSeason('summer')
20	.then(
21		response => {
22			return changeSeason('autumn');
23		}
24	)
25	.then(
26		response => {
27			return changeSeason('winter');
28		}
29	)
30	.then(
31		response => {
32			return changeSeason('spring');
33		}
34	)
35
36

###追記
若干内容を変更して別の質問として投稿しております。
https://teratail.com/questions/126546

HayatoKamono

2018/05/16 09:39

「異なる処理の関数を時間差で実行する場合はどのように記述するのが良いのでしょうか？」とありますが、掲載コードでは同じ処理を繰り返し関数の引数に与える値を変えて実行しているように見受けられますが、質問はchangeSeason()を繰り返し実行したいという内容で合っていますか？

umauman

2018/05/16 09:51

質問の仕方が悪かったです。申し訳ありません。今回は異なる引数を渡す場合です。ただ複数の異なる関数を時間差で実行する方法も知りたいと思っています。例えば、function changeToSummer(); function changeToWinter();の様な...ただ勝手が異なりそうなのでまた別の質問にした方が良さそうですね。ご指摘ありがとうございました。

umauman

2018/05/16 09:54

>質問はchangeSeason()を繰り返し実行したいという内容で合っていますか？→こちらで合っています。

HayatoKamono

2018/05/16 14:19

お、途中まで回答を書いていたのですが、用事で離れている間に解決済みになったようで何よりです。

HayatoKamono

2018/05/16 14:20

> 「勝手が異なりそうなのでまた別の質問にした方が良さそうですね。」　そうですね。必要であれば別質問で投稿なさって下さい。だいたい回答は作っていたので。

umauman

2018/05/16 14:51

再びありがとうございます。回答もほとんど付かなかったのであまりに勘違い＆初歩的な質問をしてしまったのかと思い早々に撤退してしまいました。ただ質問欄に列挙している通り知りたいことが沢山あります。差支え無ければ今からでもご回答いただけないでしょうか。

umauman

2018/05/16 20:11

あまり質問の仕方が良くなかったように思いますので、新たな質問として投稿してみました。もしお時間許せばで結構ですのでも、ご回答いただけるととても嬉しいです。（途中まで書いてくださっていたという内容とても気になります）

HayatoKamono

2018/05/17 04:28

あちらにこちらの質問用に書いてた回答も含めて投稿しておきました。

umauman

2018/05/17 06:10

確認しました。とても丁寧な回答に本当に感謝です。別の質問→https://teratail.com/questions/126546

行動規範の内容に同意します

回答1件

ベストアンサー

難しく考えすぎです。Promise を使う必要はありません。
setInterval() を使っても問題ありません。Promise を使う場合でも結局 foreach などで無限ループさせることになりますし。

無限ループがタブーとされるのは絶え間なく処理が実行されて過負荷がかかり、アプリケーションが固まったりクラッシュしたりするからです。今回の場合はインターバルを置くので問題ありません。

javascript
1const container = document.getElementById('container');
2
3const seasonClassList = ['spring', 'summer', 'autumn', 'winter'];
4let currentSeasonIndex = 0;
5
6setInterval(function() {
7  // 現在の季節のクラスを設定
8  container.className = seasonClassList[currentSeasonIndex];
9  // インデックスが 0,1,2,3,4,0,1,2,3,4 と繰り返すように演算
10  currentSeasonIndex = (currentSeasonIndex + 1) % seasonClassList.length;
11}, 3000);