我怎样才能做出“等等，它正在处理..！”系统？

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>

正如我在我的代码中评论的那样，我已经模仿了ajax的请求等待时间很短。现在，我想在用户点击其中一个已检查图标时向用户显示“正在处理”。我可以在图标

下使用这样的png

但是我希望通过关闭/打开检查图标来等待（正在处理）时间。目前，当我点击选中图标时，没有任何反应，然后在1 sec之后绿色会发生变化。现在我想在此1 sec中执行一些操作，向用户显示“系统正在运行，请稍候......”。

关闭/打开检查图标可能是一个好主意。有谁知道我该怎么做？

编辑：我不想使用任何图片。我只是想改变那个check-icon的颜色。就像打开和关闭的灯一样。

Answer 1

老实说，这很简单，制作一个只有加载图像的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();
  });

});

Answer 2

  

  
1. 用户点击其中一个图标。 2.那个图标开始眨眼。 3.过了一会儿（在这种情况下为1秒），闪烁停止。然后检查   className添加。
  

您可以将.fadeToggle()的持续时间设置为1000 / x，其中x是.fadeToggle()应调用的次数来模拟＆＃34;眨眼＆＃34;或sleep()通话期间的闪烁效果

＆＃13;

＆＃13;

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');
  });

});

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;