Question

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

我尝试通过将错误分解为更小的部分来复制错误，但无济于事。这里是示例代码。任何指针都会受到赞赏。

<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>

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

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

    // Do Something
    for (var i = 0; i < 50000; i++){
        console.log(i)
    }

    // Put Search icon back
    search.removeClass("fa-search")
    search.addClass("fa-spinner fa-pulse")
})

Answer 1

问题是因为for循环是同步的，并且阻止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);
})

Working example

请注意，您应该使用传递给事件处理程序的event参数，而不是全局event对象。此外，removeClass() / addClass()逻辑在循环之后向后并设置了错误的类，您声明要重新设置fa-search类。

Answer 2

如果您使用的是Ajax，则可以使用以下内容：

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

根据您的Ajax调用ajaxStart和ajaxStop。有关JQuery ajaxStart和ajaxStop的更多信息，请点击此处。

添加微调器以输入jquery提交

2 个答案: