Javascript 在jquery提交时向输入添加微调器

提交表单时，在搜索表单中添加微调器时遇到问题。微调器最终会显示，但只有在函数完成后才会显示

我试图通过将错误分解成更小的部分来复制错误，但没有成功。这里是示例代码。任何指点都将不胜感激

<form id="search" class="form-inline">
    <div class="input-group align-bottom" id="address_search">
        <input type="text" name="query" id="query" placeholder="search" class="form-control">       
        <span class="input-group-btn">
            <button class="btn btn-primary" type="submit">
                <i id="search-button" class="fa fa-search" aria-hidden="true"></i>
            </button>
        </span>
    </div>
</form>

$（“#搜索”）.submit（函数（）{
event.preventDefault（）；
搜索=$（“#搜索按钮”）
search.removeClass（“fa搜索”）
search.addClass（“fa微调器fa微调”）
//做点什么
对于（变量i=0；i<50000；i++）{
控制台日志（i）
}
//放回搜索图标
search.removeClass（“fa搜索”）
search.addClass（“fa微调器fa脉冲”）
})

问题是因为的

循环是同步的，并且阻止UI线程使用您添加/删除的类进行更新

解决此问题的一个方法是将循环放置在一个短延迟的
setTimeout（）
中，如下所示：

$("#search").submit(function(e) {
    e.preventDefault();

    var $search = $("#search-button")
    $search.removeClass("fa-search").addClass("fa-spinner fa-spin")

    setTimeout(function() {
        for (var i = 0; i < 50000; i++){
            console.log(i)
        }

        $search.addClass("fa-search").removeClass("fa-spinner fa-spin")
    }, 50);
})

$（“#搜索”）.submit（函数（e）{
e、 预防默认值（）；
var$search=$（“#搜索按钮”）
$search.removeClass（“fa搜索”）.addClass（“fa微调器fa微调”）
setTimeout（函数（）{
对于（变量i=0；i<50000；i++）{
控制台日志（i）
}
$search.addClass（“fa搜索”）.removeClass（“fa微调器fa微调”）
}, 50);
})


请注意，应该使用传递给事件处理程序的
事件
参数，而不是全局
事件
对象。另外，
removeClass（）
/
addClass（）
逻辑在循环后向后，并设置了错误的类，您在其中声明要重新恢复
fa search
类。
如果您使用的是Ajax，您可以使用如下内容：

var $spinner = $('#searchButton').hide();
$(document)
.ajaxStart(function () {
    $spinner.show();
})
.ajaxStop(function () {
    $spinner.hide();
});

ajaxStart
和
ajaxStop
根据Ajax调用触发。
更多关于JQuery的信息，如果有兴趣，请点击此处。
谢谢您的提示。我原以为这与通话的同步性有关，但我一直在暂停时加入旋转器的内容，接近但不是雪茄。