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()のループを配置することです：あなたは、イベントハンドラに渡されたeventパラメータを使用する必要があります

$("#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オブジェクトではありません。また、removeClass()/addClass()ロジックは、ループの後ろにあり、間違ったクラスを設定しました。fa-searchクラスを元に戻したいと述べています。あなたがアヤックスを使用している場合

Answer 2

次のようなものを使用することができます

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

あなたのAjax呼び出しごとajaxStartとajaxStop火災。 JQueryの詳細ajaxStartとajaxStopが興味があればここにあります。