JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Blinky!</h1>
<h2>Delayed blink</h2>
<h3>I'll blink 3 times</h3>
<h4>I do a deferred</h4>
JavaScript
(function($) {
$.fn.blinky = function(args) {
var opts = { frequency: 1e3, count: -1 };
args = $.extend(true, opts, args);
var i = 0;
var that = this;
var dfd = $.Deferred();
function go() {
if(that.length == 0) {
return dfd.reject();
}
if(i == args.count) {
return dfd.resolve();
}
i++;
$(that).fadeOut().fadeIn();
setTimeout(go, args.frequency);
};
go();
return dfd.promise();
};
})(jQuery);
$('h1').blinky();
$('h2').blinky({ frequency: 100e3 });
$('h3').blinky({ count: 3 });
$('h4').blinky({ count: 1 }).done(function() { $('h4').css('color', '#f00'); });
$('p').blinky().fail(function() { console.log('oh snap!'); });