javascript - 将微调器添加到 jquery 提交的输入

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 -搜索类。