jqueryがデータチャンクの保存をフェードインまたはフェイルします

Question

jQueryに問題があります。

私はこのコードを持っている：

<div id="divSavingInformation" style="position:absolute;">All changes saved.</div> 
$(function(){ 

     $(document).on("blur","div[contenteditable=true]",function() { 

      var wait = Math.floor(Math.random() * 3000) + 500; 

      $('#divSavingInformation').fadeOut(500, function() { 
       $('#divSavingInformation').html("<i class='fa fa-spinner fa-pulse fa-lg fa-fw'></i> Saving data...").fadeIn(500).delay(5000).fadeOut(500).html("All data saved.").fadeIn(500); 
      }); 

      var field_userid = $(this).attr("id") ; 
      var value = $(this).text() ; 
      $.post('pages/ajax/updateRadio.php' , field_userid + "=" + value, function(data){ 

      }); 
     }); 
    }); 

コードがのcon​​tentEditableのdivを経由してトリガされます。 ここにはjsfiddleですhttps://jsfiddle.net/oyv27cce/3/

私はそれが必要な方法で動作しません。 基本的に、私が行うには、それを必要とするものがこれです：

1. フェードアウトいくつかを待つ
2. 上記の変更を示すためのdivという名前の「divSavingInformation」divの中<i class='fa fa-spinner fa-pulse fa-lg fa-fw'></i> Saving data...
3. フェードへのdivの
4. 変更内容を秒がdivを表示している間、これは後で変数になります。今は5秒です。
5. フェードは
6. フェードバックでAll data savedに出てdiv要素の
7. 変更内容バックDIVとコードがフェードアウトされず、バックではなく、コンテンツが表示されないものを、現在

を示したまま変更する。私は遅れを間違えて使っていると思います。遅くなる前にコンテンツをAll data savedに戻して、スピナーが表示されないように見せかけるかもしれません。

私は何をしているのかわかりませんし、実際に助けてもらえます。

Answer 1

fadeIn()と​​は非同期であり、現在実行中の関数が完了した後で効果を実行するためにキューに入れられます。あなたは、関数終了後まで、最終的な効果を延期する必要があります、これはsetTimout()によって考慮されるようにdelay()呼び出しを取り除く：jsbinを使用して、あなたの完全なコードを共有

$('#divSavingInformation').hide(); 
 
$('#divSavingInformation').html("<i class='fa fa-spinner fa-pulse fa-lg fa-fw'></i> Saving data...</div>").fadeIn(500).fadeOut(5000);; 
 

 
// Defer the following code until after this function has completed. 
 
setTimeout(function(){ 
 

 
    $('#divSavingInformation').html('All data saved.').fadeIn(500); 
 
}, 5000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="divSavingInformation"></div>

Answer 2

これにはsetTimeout（）を使用する必要があります。

var element = $('div'); 
 

 
element.fadeIn(); 
 

 
setTimeout(function(){ 
 
    element.fadeOut(); 
 
}, 2000);

これは2000ミリ秒または2秒後に要素とフェードアウトフェードインします。

あなたはこれを使用することができます：

$アヤックス（{ URL： "/post/url.php"、 タイプ： "POST"、 データ：パラメータ、 成功：successFunction、 エラー：errorFunction }）;

関数successFunctionとerrorFunctionを使用すると、これらの状況を処理できます。インライン編集を拡張して、失敗したときにユーザーがよく知っているようにすることができます。 XEditableはそれを行うライブラリです。