どうすれば "待って、処理しています..！"システム？ここ

Question

は私のコードです：

function sleep (time) { 
 
    return new Promise((resolve) => setTimeout(resolve, time)); 
 
} 
 

 
$("body").on('click', '.fa-check', function(e) { 
 

 
    // sleep() emulates a short waiting time as ajax's request 
 
    sleep(1000).then(() => { 
 
    $('.fa-check').not(this).removeClass('checked'); 
 
    $(this).toggleClass('checked'); 
 
    }); 
 

 
});

.fa-check { 
 
    color: #aaa; 
 
    cursor: pointer; 
 
} 
 

 
.fa-check.checked { 
 
    color: #44b449; 
 
}

<script src="https://use.fontawesome.com/9e9ad91d21.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p>answer1</p> 
 
<i class="fa fa-check" aria-hidden="true"></i> 
 
<hr> 
 
<p>answer2</p> 
 
<i class="fa fa-check checked" aria-hidden="true"></i> 
 
<hr> 
 
<p>answer3</p> 
 
<i class="fa fa-check" aria-hidden="true"></i>

私は私のコードにコメントしてきたように、私はアヤックスの要求として、短い待ち時間をエミュレートしました。ここで、ユーザーがの「処理中です」のいずれかのチェックアイコンをクリックすると、そのユーザーに表示されます。私はアイコンの下にこのようなPNGを使用することができます。

しかし、私はを待っているように、そのチェックインのアイコンをオン/オフすることにより、（それが処理している）ことを時間をやりたいです。現在、チェックアイコンをクリックすると何も起こりません。1 secの後に緑色が変わります。今私はこの1 secのユーザーにを表示するために何かしたい "システムが動作しています、しばらくお待ちください..."。

このチェックアイコンをオン/オフにするとよいでしょう。誰も私はそれをどうやって行うことができますか？

編集：私は画像を使用しません。私はちょうどそのチェックアイコンの色を変更したい。点灯して消灯するランプのように。

Answer 1

1. ユーザーがこれらのアイコンの一つをクリック完了だときにそれを隠します。 2.そのアイコンが鳴り始める。 3.しばらくすると（この場合は1秒）点滅が止まります。 4.次にチェックされた classNameが追加されます。あなたはxが倍.fadeToggle()の数がsleep()コール

   function sleep (time) { 
    
       return new Promise((resolve) => setTimeout(resolve, time)); 
    
   } 
    
   
    
   function blink (time) { 
    
       $(this).fadeToggle(time, function() { 
    
       if (++n < t) { 
    
        return blink.call(this, time) 
    
       } else { 
    
        n = 0; 
    
       } 
    
       }) 
    
   } 
    
   
    
   var duration = 1000; 
    
   var n = 0; 
    
   var t = 10; 
    
   var blinks = duration/t; 
    
   
    
   $("body").on('click', '.fa-check', function(e) { 
    
       // sleep() emulates a short waiting time as ajax's request 
    
       $.when(blink.call(this, blinks), sleep(duration)) 
    
       .then(() => { 
    
       $('.fa-check').not(this).removeClass('checked'); 
    
       $(this).toggleClass('checked'); 
    
       }); 
    
   
    
   });

   .fa-check { 
    
       color: #aaa; 
    
       cursor: pointer; 
    
   } 
    
   
    
   .fa-check.checked { 
    
       color: #44b449; 
    
   }

   <script src="https://use.fontawesome.com/9e9ad91d21.js"></script> 
    
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    
   
    
   <p>answer1</p> 
    
   <i class="fa fa-check" aria-hidden="true"></i> 
    
   <hr> 
    
   <p>answer2</p> 
    
   <i class="fa fa-check checked" aria-hidden="true"></i> 
    
   <hr> 
    
   <p>answer3</p> 
    
   <i class="fa fa-check" aria-hidden="true"></i>

   中に "ウインク" または点滅効果をシミュレートするために呼び出されるべきれる1000/xに設定した時間で.fadeToggle()を使用することができます

Answer 2

これは正直なところ非常に簡単ですが、読み込みイメージのみを持つdivを作成してください。

<div id="loading_image"> 
<img src="loader.gif"> 
</div> 

今とすぐにjQueryの要求が開始されたとして、それを表示し、

$("body").on('click', '.fa-check', function(e) { 
    //show the loader 
    $("#loading_image").show(); 
    // sleep() emulates a short waiting time as ajax's request 
    sleep(1000).then(() => { 
    $('.fa-check').not(this).removeClass('checked'); 
    $(this).toggleClass('checked'); 
    //hide loader now 
    $("#loading_image").hide(); 
    }); 

});