実現したいこと

ボタンを2つ用意（ボタン1、ボタン2）する。
ボタン1をクリックした後、ボタン2を青色に変える。
2秒経過後、青色を赤色に変える

現在の状況

ボタン1を押した後、色が青色に変わらず、2秒後赤色に変わる

うまくいかないこと

「実現したいこと」の2が実現できておらず、ボタン2の色が青色に変わらない

現在のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Document</title>
7</head>
8<body>
9  <div id="app">
10  <button id="btn1" v-on:click="light">ボタン1</button>
11  <button id="btn2">ボタン2</button>
12  </div>
13  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
14  <script>
15    var app = new Vue({
16      el: "#app",
17      methods: {
18        light: function() {
19          document.getElementById("btn2").style.backgroundColor = "blue";
20          this.sleep(2000);
21          document.getElementById("btn2").style.backgroundColor = "red"
22        },
23        sleep: function(interval) {
24          var dt1 = new Date().getTime();
25          var dt2 = new Date().getTime();
26          while (dt2 < dt1 + interval) {
27            dt2 = new Date().getTime();
28          }
29        }
30      }
31    })
32  </script>
33</body>
34</html>

デバッグではボタン2が青色に変わることが確認できています。
デバッグなしではボタン2が青色に変わることが確認できません。
どこに原因があるのか教えて頂けないでしょうか。

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

回答1件

ベストアンサー

こんにちは。

どこに原因があるのか教えて頂けないでしょうか。

基本的に、DOMの変更はJavaScriptの実行が終わるまで再描画されないと思っておいた方がいいです。
ご希望の動作にするには、非同期処理を取り入れる必要があります。

js
1            methods: {
2                light: async function () {
3                    document.getElementById("btn2").style.backgroundColor = "blue";
4                    await this.sleep(2000);
5                    document.getElementById("btn2").style.backgroundColor = "red"
6                },
7                sleep: time => new Promise(resolve => setTimeout(resolve, time))
8            }

ただ、直接DOMを触るのは、vue を使うのであれば避けた方がいいのではないかな、と個人的には思います。

投稿2020/12/26 02:23

Lhankor_Mhy

総合スコア36960

kj14

2020/12/26 02:43

ご回答ありがとうございます。ご提示していただいたコードで問題が解決しました。 >DOMの変更はJavaScriptの実行が終わるまで再描画されないそうなのですね。理解が足りていません。 >非同期処理を取り入れるそういった方法があるのですね。 >直接DOMを触るのは、vue を使うのであれば避けた方がいいのでは vueもJavascriptも初心者でわからないことばかりです。大変勉強になりました。ありがとうございました。

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