stack stack - 4 months ago 7
jQuery Question

How can I make a "Wait, it's processing ..!" system?

Here is my code:



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>





As I've commented in my codes, I've emulated a short waiting time as ajax's request. Now I want to show the user "it's processing" when he clicks on one of those checked-icons. I can use a png like this under the icon: enter image description here

But I want to do that by turning that checked-icon off/on as waiting (it is processing) time. Currently when I click on a checked-icon, nothing happens, and then after
1 sec
the green color changes. Now I want to do something in this
1 sec
to show the user "the system is working, please wait ..".

Turning that checked-icon off/on can be a good idea. Anybody knows how can I do that?

EDIT: I don't want to use any image. I just want to change the color of that checked-icon. Like a lamp that turns on and turns off.

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

You can use .fadeToggle() with duration set to 1000 / x where x is number of times .fadeToggle() should be called to simulate "wink" or blinking effect during sleep() call

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

function blink (time) {
  $(this).fadeToggle(duration / t, function() {
    if (++n < t) {
      return blink.call(this, n)
    } else {
      n = 0;
    }
  })
}

var duration = 1000;
var n = 0;
var t = 10;
var blinks = 250;

$("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>