JSFiddle - React, Tailwind, and code Playground

by gkucmierz

HTML

<span></span>

JavaScript

var asyncMap = function(arr, fn, endFn) {
	var i = 0,
		len = arr.length,
		res = [];

	(function callee() {
		fn(arr[i], i, function(singleRes) {
			res.push(singleRes);
			if (++i < len) {
				callee();
			} else {
				endFn(res);
			}
		}, arr);
	})();
};


var data = [
    {str: 'string one', t: 1e3},
    {str: 'second string', t: 1e3},
    {str: 'long visible string', t: 3e3},
    {str: 'end :)', t: 1e3}
];

(function callee() {
    asyncMap(data, function(el, i, fn) {
        document.querySelector('span').innerHTML = el.str;
        setTimeout(fn, el.t);
    }, function() {
        if (confirm('play again?')) {
            callee();
        }
    });
})();