JSFiddle - React, Tailwind, and code Playground

HTML

<div id="divauto"></div>

JavaScript

function timeString(arr, timeFactor, deferred) {
    if (arr.length === 0) { deferred.resolve(); }
    
    var ch = arr.shift();
    var deferredInternal = new $.Deferred();
    var promise = deferredInternal.promise();
    var delay = 100;
    
    setTimeout(function () {
        $('#divauto').append(ch);
        deferredInternal.resolve("done");
    }, delay * timeFactor)
    
    promise.done(function() { 
        timeString(arr, timeFactor, deferred); 
    });
}

function autoTypeUtil(inputString, timeFactor) {
    var deferredTimeString = new $.Deferred();
    var deferredInternal = new $.Deferred();
    var promiseTimeString = deferredTimeString.promise();
    
    inputString = inputString.split('');
    timeString(inputString, timeFactor, deferredTimeString);
    
    promiseTimeString.then(function() {
        deferredInternal.resolve()
    });
    return deferredInternal.promise();
}

function autoType(arr, timeFactor) {
    if (arr.length === 0) { return; }
    
    var promise = autoTypeUtil(arr.shift(), timeFactor);
    
    promise.done(function() {
        autoType(arr, timeFactor);
    });
}

var viewItems = ["I", "love", "jQuery", "promises"];
autoType(viewItems, 1);