Добавить, затем удалить класс после задержки, но без обновления страницы

Question

Я добавляю класс .error на клик и теперь после интервала времени в 2 секунды Я хочу удалить этот класс, но без перезагрузки страницы/refresh. Я использовал delay() в jQuery as:

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

но это не работает.

Тогда я попробовал setTimeout().

Это рабочая, но перезагружаемая страница. Я хочу что-то добавить, а затем удалить класс после определенного времени, но не обновлять/перезагружать страницу.

Пожалуйста, помогите, и спасибо заранее.

Answer 1

Использование JQuery и функции SetTimeout:

var $elm = $("#username").addClass("error"); 
 
setTimeout(function() { 
 
    $elm.removeClass("error"); 
 
}, 2000);

.error{ 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="username">USER NAME</div>

Answer 2

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>