Skip to main content
2 / 3
本文に 316 文字追加
wataru
  • 1,133
  • 3
  • 38
  • 80

Javascriptでプログレスバーを作成したいです。

やりたい事
下記のコードを codepenで見つけて、自身のアプリに実装したいのです。
https://codepen.io/ArnaudBalland/pen/PwgqMO

その前、段階でどんな仕組みで動作しているのか気になりコードを見るとjavascriptの部分がjQueryになっていたのでこれをjavascriptに直そうと以下のコードを書きました。

元々のjQueryのコード

var lang = {
  html: "100%",
  css: "90%",
  javascript: "70%",
  php: "55%",
  angular: "65%"
};

var multiply = 4;

$.each(lang, function (language, pourcent) {
  var delay = 700;

  setTimeout(function () {
    $("#" + language + "-pourcent").html(pourcent);
  }, delay * multiply);

  multiply++;
});

Javascriptコード

const lang = {
    "html": "100%",
    "css": "90%",
    "javascript": "70%",
    "php": "55%",
    "angular": "65%"
  };

let multiply = 4;

function test(language) {
    const delay = 700;
    div = document.querySelector(`#${language}-pourcent`);
    console.log(div)
    // div.innerHTML = this[language]

    setTimeout(function() {
        div.innerHTML = lang[language]
    }, delay*multiply);

    multiply++;

};

Object.keys(lang).forEach(test);

上記のコードだとセットタイムアウトが上手く動作しないです。forEachの最後の処理で動作しているみたいになります。
どうしたら期待通りの動作がするのでしょうか?

追記

下記の記事を見つけてindexforEachの引数として取ると良い見たいに書いてあるのですが、自分の場合はforEachの引数がオブジェクトでどういう感じに記述していったら良いか分からないです。

https://stackoverflow.com/questions/37977602/settimeout-not-working-inside-foreach/37977813

wataru
  • 1,133
  • 3
  • 38
  • 80