jquery changer la couleur de fond de div à clignoter

Question

Je veux changer la couleur de div et le changer à la colur d'origine après une seconde. mais je veux le faire 2-3 fois de suite pour attirer l'attention de l'utilisateur.

Voici le code jquery qui change la couleur en rouge et revient à l'original SEULEMENT.

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

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

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

}); 

Comment puis-je changer la couleur et la changer 3 fois?

Answer 1

L'utilisation d'un setTimeout récursive:

$('.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