やりたい事
下記のコードを 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
の最後の処理で動作しているみたいになります。
どうしたら期待通りの動作がするのでしょうか?
追記
下記の記事を見つけてindex
をforEach
の引数として取ると良いみたいに書いてあるのですが、自分の場合はforEach
の引数がオブジェクトでどういう感じに記述していったら良いか分からないです。
https://stackoverflow.com/questions/37977602/settimeout-not-working-inside-foreach/37977813