Teaching Promises to take '5'

Sometimes it is beneficial to execute an action in the Promise chain with delay. A good example would be flashing fields after they have been updated as a result of an Ajax call by writing something like:

	fetch('http://example.org/data')
	.then(response => return response.json())
	.then(data => { updateCellsInGrid(data); return data; })
	.then(data => { markCellsAsModifled(data); return data; })
	.delay(500)
	.then(data => { clearCellsAsModified(data); });

view raw promise-delay-example.js hosted with ❤ by GitHub

Teaching the Promise class to delay execution is very simple: you add a delay method to Promise.prototype that returns a new Promise that waits using setTimeout and then resolves with the arguments that have been passed to the call to then. Here's how it looks:

	Promise.prototype.delay = Promise.prototype.delay || function(ms) {
	return this.then(function() {
	var args = arguments;
	return new Promise(function(resolve) {
	setTimeout(function() { resolve.apply(this, args); }, ms);
	});
	});
	}

view raw promise-delay.js hosted with ❤ by GitHub

Neat, right?!

I have seen a similar approach in this post but I don't quite like the use of then to execute another function - however proper this is not looking as good as the Promise.delay :)

Happy coding!