Javascript / jQuery：在第一次AJAX调用成功时开始“闪烁”，在下一次停止

Question

I'm trying to achieve a "blinking" effect as to signal to the user that a background task is occurring: the button hovers/blinks while the Ajax call is being made, and comes back to full opacity when it's done. However, I'm getting weird and inconsistent results. The closest I got is this:

// globals are bad, I know
should_blink = true

// right before Ajax call
should_blink('#my-button', do_animate);


// inside Ajax call success
do_animate = false;
should_blink('#my-button', do_animate);

function should_blink(selector, do_animate) {
    console.log(do_animate);
    if (do_animate) {
    $(selector).fadeOut(300, function () {
        $(this).fadeIn(300, function () {
            should_blink(this, do_animate);
            })})}
            else {
                $(this).fadeIn(300);
            }
        }

Answer 1

Looks like the problem is $(this).fadeIn(300); , the $(this) is not contained in a selected element...

if (do_animate) {
  $(selector).fadeOut(300, function () {
    $(this).fadeIn(300, function () {
      should_blink(this, do_animate);
    });
  });
} else {
  // $(this).fadeIn(300);
  $(selector).fadeIn(300);
}

Answer 2

I solved this issue in a much simpler way by using CSS blink :

@-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}
.blink{
    text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-direction: alternate;
}

I then use jquery's respective AddClass and RemoveClass to trigger the animations.