javascript - Bootstrap 4.4 按钮点击 : Changing/Hiding Spinner after Loading

Question

我浏览了有关此主题的几个类似问题，但没有看到一个问题专门解决了我希望使用最新的 Bootstrap 版本 4.4 实现的目标

对于初学者，请检查这个 fiddle :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);
    });
});

在这种情况下，“已检查”一词将在 3 秒后出现在按钮内。