70931


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

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

**元々のjQueryのコード**

[code]

    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++;
    });
    
[/code]

**Javascriptコード**

[code]

    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);
    
[/code]

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

**追記**

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

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


CC BY-SA 4.0
2020-10-05T07:49:55.123
70929
2020-10-05T08:42:12.003
2020-10-05T08:42:12.003
3060
22565
question
javascript jquery
Javascriptでプログレスバーを作成したいです。


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

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

[code]

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

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

[code]

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


CC BY-SA 4.0
2020-10-05T08:12:17.900
70931
2020-10-05T08:26:59.067
2020-10-05T08:26:59.067
3475
3475
70929
answer