添加微调器来输入jquery提交

我有一些麻烦，当提交表单时，将微调项添加到我的搜索表单中。微调最终显示出来，但是直到函数完成之后。添加微调器来输入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>

$("#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") 
})

来源

2016-12-06 macintoshPrime

的问题是，因为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类。

来源

2016-12-06 20:15:55

感谢提示Rory。我曾经以为这与调用的同步性有关，但我一直在把暂时关闭，但不是雪茄。 – macintoshPrime

如果您在使用Ajax你可以使用类似以下内容：

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

按你的Ajax调用的ajaxStart和ajaxStop火灾。更多关于JQuery ajaxStart和ajaxStop如果感兴趣，请点击这里。

来源

2016-12-06 20:18:56 Illdapt

添加微调器来输入jquery提交

回答

相关问题