javascript - 添加然后在延迟后删除类但没有页面刷新

Question

我在单击时添加了一个类 .error ，现在在 2 秒的时间间隔后我想删除这个类，但没有页面重新加载/刷新。我使用了 delay() 在 jQuery 中为:

$('#username').addClass('error').delay(2000).removeClass('error');

但它不起作用。

然后我尝试了 setTimeout()。

它正在工作，但正在重新加载页面。我想要在特定时间后添加然后删除类但不刷新/重新加载页面的东西。

请帮忙，提前谢谢你。

Answer 1

var element = document.getElementById('username');

element.classList.add('error');

window.setTimeout(function () {
  element.classList.remove('error');
}, 2000);

#username {
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: white;
  background-color: green;
  text-align: center;
  transition: background-color .25s linear;
}
#username.error {
  background-color: red;
}

<div id="username">Username</div>