Javascript 添加超時后代碼停止工作

Question

我正在嘗試將名為pressed的 class 添加到名為w的 class 元素中。 當用戶點擊包含 class w的元素時，就會發生這種情況。 然后我想在延遲 100 后刪除 class新聞。這就是我寫的代碼。

（簡而言之：我正在嘗試通過添加（然后在 100 毫秒后刪除） CSS class按下來使用 js 添加 animation 。）

但這不起作用，它的行為如下：

當我取消評論這部分時setTimeout(foo(this.innerText), 100); 甚至document.querySelector("."+this.innerText).classList.add("pressed"); 沒有被執行。

document.querySelector('.w').addEventListener("click",function () {
  document.querySelector("."+this.innerText).classList.add("pressed");
  // setTimeout(foo(this.innerText), 100);
});
function foo(stringclass) {
  document.querySelector("."+stringclass).classList.remove("pressed");
  console.log(stringclass);
}

有人可以幫我嗎？

HTML 代碼

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Drum Kit</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
</head>

<body>
  <h1 id="title">Drum 🥁 Kit</h1>
  <div class="set">
    <button class="w drum">w</button>
  </div>
  <script src="index.js" charset="utf-8"></script>
</body>

</html>

CSS Class

.pressed {
  box-shadow: 0 15px 40px 0 #DBEDF3;
  opacity: 0.5;
}

Answer 1

setTimeout(foo(this.innerText), 100); 立即執行foo 。 您需要傳遞 function 本身。 我相信你想要更接近document.querySelector('.w').addEventListener("click",function (e) { document.querySelector("."+e.target.innerText).classList.add("pressed"); setTimeout(function() {foo(e.target.innerText)}, 100); });

Javascript 添加超時后代碼停止工作

問題描述

1 個解決方案

解決方案1
0 已采納 2022-04-25 18:22:58

Javascript 添加超時后代碼停止工作

問題描述

1 個解決方案

解決方案1 0 已采納 2022-04-25 18:22:58

解決方案1
0 已采納 2022-04-25 18:22:58