Javascript 如何在几秒钟后删除动态css，使组件在该时间段之前不会被阻止

我来自Java背景。在这里，我们有多线程来处理此类行为。我需要你的帮助。当我的组件加载时。一些简单的样式将应用于此。但点击按钮5秒钟后，样式应该消失

模板：

<div [class.error-warning]="applyStyle">
  <select>
    <option>Apple</option>
    ...
  </select>
</div>

<button (click)="removeStyle()">Remove</button>

applyStyle: boolean=true;

removeStyle() {
  //after 5 seconds
  this.applyStyle=false;
}

.error-warning {
  border: 2px solid red;
}

CSS:

<div [class.error-warning]="applyStyle">
  <select>
    <option>Apple</option>
    ...
  </select>
</div>

<button (click)="removeStyle()">Remove</button>

applyStyle: boolean=true;

removeStyle() {
  //after 5 seconds
  this.applyStyle=false;
}

.error-warning {
  border: 2px solid red;
}

我在这里尝试了

睡眠

，但它阻止了整个

下拉列表

5秒钟。请帮帮我。这是您可以使用的。

因此，在您的情况下，您的

removeStyle（）

方法如下所示：

removeStyle() {
  // after 5 seconds
  setTimeout(() => this.applyStyle = false, 5000);
}

---

因为它是同一个线程，所以不会阻止选择5秒钟。我想整个主流程将等待5秒。请纠正我。它不会阻止你的主线程，不。这是一个非常有用的答案，可以获得关于“为什么”的更多信息，它不会阻止主线程。