javascript - 我怎样才能使 "Wait, it' s 处理..!”系统？

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 秒 后，绿色发生变化。现在我想在这 1 秒 内做一些事情来向用户显示“系统正在运行，请稍候..”。

关闭/打开勾选图标可能是个好主意。有人知道我该怎么做吗？

编辑:我不想使用任何图像。我只想更改选中图标的颜色。就像一盏打开又关闭的灯。

Answer 1

1. user clicks on one of those icons. 2. that icon starts winking. 3. after a while (1sec in this case) the blinking stops. 4. then checked className adds.

您可以使用 .fadeToggle() 并将持续时间设置为 1000/x 其中 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>