setTimeoutを仕組み化させてコードの記述量を抑えたい。

コードをコンパクトにして関数を使いまわしたい。

二つの要素にshowクラスを時間差で付与させています。
要素の数が増えていくことを想定すると効率が悪いため、functionを簡素にしたいです。

js
1function showFn() {
2    setTimeout(() => {
3        for (i = 0; i < fluffy.length; i++) {
4            fluffy[0].classList.add('show');
5        }
6    }, 1000);
7    setTimeout(() => {
8        for (i = 0; i < fluffy.length; i++) {
9            fluffy[1].classList.add('show');
10        }
11    }, 2000);
12};

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Document</title>
9    <link rel="stylesheet" href="css/style.css">
10</head>
11
12<body>
13    <header class="header">
14        <div class="header__wrapper">
15            <nav class="header__list">
16                <div class="header__title">
17                    test
18                </div>
19                <div class="header__btn-wrapper">
20                    <a href="" class="header__login btn">Login</a>
21                </div>
22            </nav>
23        </div>
24    </header>
25
26    <section class="content">
27        <h1 class="content__title fluffy">Welcome to our service</h1>
28        <div class="content__column fluffy">
29            <div class="content__btn-wrapper">
30                <a href="" class="content__btn btn">Guest</a>
31            </div>
32            <div class="content__btn-wrapper">
33                <a href="" class="content__btn btn">Resister</a>
34            </div>
35        </div>
36    </section>
37    <script src="js/script.js"></script>
38</body>
39
40</html>

css
1* {
2  margin: 0;
3  padding: 0;
4}
5
6html {
7  font-size: 62.5%;
8}
9
10body {
11  background-color: #29b6f6;
12}
13
14.btn {
15  display: inline-block;
16  border-radius: 8px;
17  text-decoration: none;
18  color: #29b6f6;
19  background-color: #ffffff;
20}
21
22.fluffy {
23  opacity: 0;
24  visibility: hidden;
25  -webkit-transform: translateX(30px);
26          transform: translateX(30px);
27  -webkit-transition: all 3s;
28  transition: all 3s;
29}
30
31.show {
32  opacity: 1;
33  visibility: visible;
34  -webkit-transform: translateX(0px);
35          transform: translateX(0px);
36}
37
38.header__wrapper {
39  padding: 2rem;
40}
41
42.header__list {
43  display: -webkit-box;
44  display: -ms-flexbox;
45  display: flex;
46  -webkit-box-pack: justify;
47      -ms-flex-pack: justify;
48          justify-content: space-between;
49  -webkit-box-align: center;
50      -ms-flex-align: center;
51          align-items: center;
52}
53
54.header__title {
55  font-size: 1.6rem;
56}
57
58.header__login {
59  text-align: center;
60  width: 120px;
61  padding: 1rem;
62  font-size: 2rem;
63}
64
65.content {
66  text-align: center;
67  padding-top: 9rem;
68  padding-bottom: 9rem;
69}
70
71.content__title {
72  font-size: 3.6rem;
73  color: #ffffff;
74  margin-bottom: 12rem;
75}
76
77.content__btn-wrapper {
78  margin-bottom: 6rem;
79}
80
81.content__btn {
82  padding: 1rem;
83  width: 300px;
84  font-size: 1.6rem;
85}
86
87.content__column > :last-child {
88  margin-bottom: 0;
89}
90/*# sourceMappingURL=style.css.map */

js
1// const fluffy = document.querySelectorAll('fluffy');
2// console.log(fluffy);
3
4// window.addEventListener('load',function(){
5//     setTimeout(() => {
6//         showFn();
7//     }, 2000);
8// });
9
10// function showFn() {
11//     fluffy.classList.add('show');
12// }
13
14
15// window.addEventListener('load',function(){
16//     setTimeout(function(){
17//         function1();
18//         function2();
19//     },1000)
20// });
21
22
23const fluffy = document.getElementsByClassName('fluffy');
24console.log(fluffy);
25
26window.addEventListener('load', function () {
27    // setTimeout(() => {
28    //     for (i = 0; i < fluffy.length; i++) {
29    //         fluffy[0].classList.add('show');
30    //     }
31    // }, 1000);
32
33    // setTimeout(() => {
34    //     for (i = 0; i < fluffy.length; i++) {
35    //         fluffy[1].classList.add('show');
36    //     }
37    // }, 2000);
38    showFn();
39
40});
41
42
43function showFn() {
44    setTimeout(() => {
45        for (i = 0; i < fluffy.length; i++) {
46            fluffy[0].classList.add('show');
47        }
48    }, 1000);
49    setTimeout(() => {
50        for (i = 0; i < fluffy.length; i++) {
51            fluffy[1].classList.add('show');
52        }
53    }, 2000);
54};

試したこと

for文を活用して取得したfluffyクラスを分離させ、各々にsetTimeoutを用いた。

js
1//for文を挟まないと二つ目のsetTimeoutが発火しない。
2function showFn() {
3    setTimeout(() => {
4        // for (i = 0; i < fluffy.length; i++) {
5            fluffy[0].classList.add('show');
6        // }
7    }, 1000);
8    setTimeout(() => {
9        // for (i = 0; i < fluffy.length; i++) {
10            fluffy[1].classList.add('show');
11        // }
12    }, 2000);
13};

maisumakun

2021/05/04 09:22 編集

> 二つの要素にshowクラスを時間差で付与させています。 ※ コードの読み間違いでした同じ要素に2回付与している（2回目はすでにクラスがあるので無意味）ように見えるのですが、そうではない動作を考えていますか？

You

2021/05/04 09:13

const fluffy = document.getElementsByClassName('fluffy');で取得した要素を[0][1]と切り離して考えています。出現させたい要素が増えたときにいちいちsetTimeout(() =>...を何度も書かないようにしたいです。

maisumakun

2021/05/04 09:20 編集

関数内のfor (i = 0; i < fluffy.length; i++)のループは何のために書いていますか？（これがあったので、全要素に対してクラスを変えるものと勘違いしてしまいました）

You

2021/05/04 09:23

fluffyを[0][1]に切り分けるために書きました。ループ文は必要ないですか？

maisumakun

2021/05/04 09:25 編集

はい、「同じクラスを何度も付与する」という、1度でいい作業を無駄に繰り返すだけのループです。

You

2021/05/04 09:27

for文を消したら二つ目の処理が実行されなくなりました。

maisumakun

2021/05/04 09:41

2つ目の関数の先頭に書かれたqは何ですか？

You

2021/05/04 09:44

誤字ですね。ただいま修正いたしました。

maisumakun

2021/05/04 09:45

qを消しても2つ目は動作しないままですか？

hide5stm

2021/05/04 12:11

あまり見た目よくないですが、setTimeout()を使い回せる関数を作ってみました。 ``` showFunc(0, 1000); showFunc(1, 2000); ``` 以下で動作します。 https://jsfiddle.net/hmdgqrav/4/

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

回答1件

ベストアンサー

javascript
1<style>
2.fluffy:not(.show){
3display:none;
4}
5</style>
6<script>
7var timerId=setInterval(()=>{
8  const node=document.querySelector('.fluffy:not(.show)');
9  if(node !== null ){
10    node.classList.add('show');
11  }else{
12    clearInterval(timerId);
13  }
14},1000);
15</script>
16<div class="fluffy">1</div>
17<div class="fluffy">2</div>
18<div class="fluffy">3</div>