0

やりたい事
下記のコードを 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

1 件の回答 1

0

変数divがグローバル変数になっています。setTimeout()に渡した関数が実行されるタイミングではforEach()が終了しているため変数divはループの最後の#${language}-pourcen要素を指しています。

divをローカル変数にすると直るでしょう。

  const div = document.querySelector(`#${language}-pourcent`);

または、jQueryのコードと同じように querySelector()setTimeout()コールバック内で実行すればよいです。

setTimeout(function() {
  document.querySelector(`#${language}-pourcent`).innerHTML = lang[language];
}, delay * multiply);

1
  • forEachで実行される関数の中で定義した関数なのに、実行タイミングが違うんですね。
    – wataru
    Commented 2020年10月5日 10:33

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。