JSFiddle - React, Tailwind, and code Playground

by klarstil

HTML

<button>
  Start waiting timer
</button>
<div class="waiting-timer">

</div>

JavaScript

var waitingTimer = function(time) {
	
	// Get the global deferred object
	var deferred = $.Deferred(),
		timer;

	// Make sure our values are defined.
	time = time || 10000;
	
	timer = window.setInterval(function() {
		// Fire the notify method on the deferred object
		deferred.notify();
	}, 1000);
	
	window.setTimeout(function() {
		window.clearInterval(timer);
		
		// Resolve the promise
		deferred.resolve();
	}, time);
	
	// We're returning the promise at that point
	return deferred.promise();
};

$('button').on('click', function() {
	var $waitingTimer = $('.waiting-timer');
	
    waitingTimer(5000).progress(function() {
    	$waitingTimer.html($waitingTimer.html() + ".");
  	}).done(function() {
    	$waitingTimer.html("Done!");
    });
});