setIntervalは、前に行ったタスクが削除されずに残ってしまうので、12345と処理のタスクが増えていって、ものすごく重くなる問題が解決するのでしょうか?
まぁ、setIntervalでもloop関数の中で呼ぶ構造になっていなければ大丈夫です。
その場合ループという名称はおかしいので、slideShowにでも変更した方が良いかもしれないですね
JavaScript
1(function () {
2 var item0 = document.getElementById('slide0');
3 var item1 = document.getElementById('slide1');
4 var item2 = document.getElementById('slide2');
5 var item3 = document.getElementById('slide3');
6 var arrayItem = [
7 item0,
8 item1,
9 item2,
10 item3
11 ];
12 var i = 0;
13 // JSは巻き上げを防ぐ為に普通の変数に無名関数を代入した方が良い
14 var slideShow = function () {
15 arrayItem[i].classList.add('slide-fadeout');
16 arrayItem[i].classList.remove('slide-fadein');
17 ++i;
18 // ここの条件式は一致ではなく以上にしたほうが良い
19 if(i => arrayItem.length) {
20 i = 0;
21 }
22 arrayItem[i].classList.add('slide-fadein');
23 arrayItem[i].classList.remove('slide-fadeout');
24 };
25 setInterval(slideShow, 18000);
26})();
【おまけ】 前回の質問のおまけで書いた大規模リファクタリング
フルスクラッチでばばーと書いたので品質は微妙ですが、
構文エラーは出てない事は確認済みです。
JavaScript
1// DOMを触るので描画完了まで遅延させたほうが良い
2document.addEventListener("load", function () {
3 // 行数を減らす為にArray.prototype.mapを使って一気に宣言
4 var items = [0, 1, 2, 3].map(function(it){
5 return document.getElementById('slide' + it);
6 });
7 var fadeIn = function (i) {
8 items[i].classList.add('slide-fadein');
9 items[i].classList.remove('slide-fadeout');
10 }
11 var fadeOut = function (i) {
12 items[i].classList.add('slide-fadeout');
13 items[i].classList.remove('slide-fadein');
14 }
15 var slideShow = function (i) {
16 if (i => items.length) {
17 i = 0;
18 }
19 fadeIn(i);
20 fadeOut(i === 0 ? items.length - 1 : i - 1);
21 setTimeout(slideShow.bind(null, i + 1), 18000);
22 }
23 setTimeout(slideShow.bind(null, 1), 18000);
24});
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/01 12:32
2018/03/02 01:08
退会済みユーザー
2018/03/02 04:15
2018/03/02 04:18
退会済みユーザー
2018/03/02 06:30