if文の処理の順番について

下記の記述を実行すると8行目のconsole.log(el)でコンソールに表示されるのがdiv.box2の方になる理由が理解できずにいます。box2を代入する前の処理にも関わらずbox2が返ってくるのはなぜでしょうか。
初歩的な質問ではございますが、ご教示いただけないでしょうか。

JavaScript
1let cnt = 0;
2function chgClass() {
3    let el = document.querySelector('div.box1')
4    if(cnt >= 5){
5        clearInterval(timer);
6    }else{
7        if (el) {
8            console.log(el);
9            el.classList = 'box2';
10        } else {
11            el = document.querySelector('div.box2')
12            el.classList = 'box1';
13        }
14        cnt++;
15    }
16  };
17  
18let timer = setInterval(chgClass, 3000);

html
1<body>
2    <div class="wrap">
3        <div class="box1">箱</div>
4    </div>
5</body>

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

回答1件

ベストアンサー

9行目のel.classList = 'box2';にブレークポイントを設定してみてください。おそらくbox1が出力されると思います。
詳しい内容は知らないのですが、console.logが呼び出されてから実際に出力が入るまで、多少のラグがあるようです。その間にクラス名が書き換えられてしまっているため、出力時には<div class="box2">箱</div>になってしまっているのだと思います。

投稿2020/11/06 09:28