提交表单后,我在向搜索表单添加微调器时遇到了一些问题。微调器最终确实会显示,但只有在函数完成后才会显示。
我尝试通过将错误分解为更小的部分来复制该错误,但无济于事。这里是示例代码。任何指示将不胜感激。
<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")
})
最佳答案
问题是因为 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);
})
请注意,您应该使用传递给事件处理程序的 event
参数,而不是全局 event
对象。此外,removeClass()
/addClass()
逻辑在循环后向后并设置了错误的类,您在其中声明要重新设置 fa -搜索
类。
关于javascript - 将微调器添加到 jquery 提交的输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41003976/