JSFiddle - React, Tailwind, and code Playground
HTML
<div class='content'></div>
JavaScript
var data = ["I am the egg man..", "I am the walrus"];
function delay(ms) { // generic delay function
var d = $.Deferred();
setTimeout(d.resolve, ms);
return d;
}
var delay100 = delay.bind(null, 100);
function write(el, str, initial) {
return [].reduce.call(str, function (prev, cur) {
return prev.then(delay100).then(function (letter) {
initial += cur;
el.text(initial + "_");
});
}, $.Deferred().resolve());
}
data.reduce(function (p, item) {
return p.then(function () {
return write($(".content"), item, ""); // might want to cache this
});
}, $.ready.promise());