Javascript 添加超时后代码停止工作

Question

我正在尝试将名为 pressed 的 class 添加到名为 w 的 class 元素中。当用户点击包含 class w 的元素时，就会发生这种情况。然后我想在 100.So 延迟后删除 class press 这是我写的代码。

（简而言之：我正在尝试通过添加（然后在 100 毫秒后删除）一个 CSS class pressed 来使用 js 添加动画。

但这不起作用，它的行为如下：

当我取消注释这部分时 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。您需要传递函数本身。我相信你想要更接近的东西 document.querySelector('.w').addEventListener("click",function (e) { document.querySelector("."+e.target.innerText).classList.add("pressed"); setTimeout(function() {foo(e.target.innerText)}, 100); });

Javascript 添加超时后代码停止工作

Javascript Code stops working when timeout is added

javascript

timeout

click

event-handling