Bootstrap 4.4 Нажатие кнопки: изменение / скрытие счетчика после загрузки

Question

Я просмотрел несколько похожих вопросов об этой топике c, но я не вижу вопроса, который бы конкретно касался того, что я хочу, используя последнюю версию Bootstrap, которая является 4.4

Для начала, пожалуйста, проверьте эту скрипку: https://jsfiddle.net/Yabi/jn92Lyak/4/

То, что я хочу, просто, но я не могу понять это.

Нажмите кнопку> текст кнопки: «ПРОВЕРКА» превращается в «Анализ с помощью счетчика»> «Анализ» исчезает> На этой же кнопке появляется «Проверено».

HTML:
<button type="button" id="verifyBtn" class="btn btn-outline-primary mt-3">VERIFY</button>

CSS:
#verifyBtn {
  margin:30px;
  width:200px;
}

JS:
$(document).ready(function() {
    $('#verifyBtn').on('click',function(event){
        // disable button
        $(this).prop("disabled", true);

        // add spinner to button for some time
        $(this).html('<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> Analyzing...');  
    });
});

Answer 1

Если вы хотите изменить «Анализ ...» на «Проверено» через определенное время, вы можете использовать функцию setTimeout(). Вот пример:

$(document).ready(function() {
    $('#verifyBtn').on('click',function(event){
        // disable button
        $(this).prop("disabled", true);

        // add spinner to button for some time
        $(this).html('<span class="spinner-grow spinner-grow-sm" role="status" aria- 
        hidden="true"></span> Analyzing...');  

        var _self = $(this);

        setTimeout(function(){
            _self.html('CHECKED');
        }, 3000);
    });
});

В этом случае слово «CHECKED» появится внутри кнопки через 3 секунды.