jQuery изменить цвет фона div для мигания

Question

Я хочу изменить цвет div и изменить его обратно на исходный цвет после секунды. но я хочу сделать это 2-3 раза подряд, чтобы привлечь внимание пользователя.

вот код jquery, который изменяет цвет на красный и возвращается обратно к оригиналу ТОЛЬКО ОДИН РАЗ.

$('.b').on('click', function() { 

var $el = $(".a"), 
x = 500, 
originalColor = $el.css("background"); 

$el.css("background", "red"); 
setTimeout(function(){ 
    $el.css("background", originalColor); 
}, x); 

}); 

Как я могу изменить цвет и изменить его обратно 3 раза?

Answer 1

Использование рекурсивный setTimeout:

$('.b').on('click', function() { 
    var $el = $(".a"), 
     x = 500, 
     originalColor = $el.css("background"), 
     i = 3; //counter 

    (function loop() { //recurisve IIFE 
     $el.css("background", "red");  
     setTimeout(function() { 
      $el.css("background", originalColor); 
      if (--i) setTimeout(loop, x); //restart loop 
     }, x); 
    }()); 
}); 

Fiddle

Answer 2

$('.b').on('click', function() { 
    var i  = 0, 
     orgCl = $('.a').css("background"), 
     timer = setInterval(function() { 
      $('.a').css('background', 'red').delay(500).show(1, function() { 
       $('.a').css('background', orgCl).delay(500).show(1, function() { 
        if (i++ > 2) clearInterval(timer); 
       }); 
      }); 
     },1000); 
}); 

FIDDLE