JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li data-timeout="1500">Some loop element</li>
    <li data-timeout="2000">Some loop element</li>
    <li data-timeout="1000">Some loop element</li>
    <li data-timeout="2000">Some loop element</li>
    <li data-timeout="1500">Some loop element</li>
</ul>

JavaScript

(function ($) {
    $.fn.extend({
        /*
        * Iterates over jQuery object collection using deferred callbacks.
        * the function assigned for iterator should return promise.
        * resolved promises notify the main deferred, so we can track each loop result.
        * returns promise.
        */
        eachDeferred: function (c) {
            var that = this,
                dfd = $.Deferred(),
                elms = $.makeArray(that),
                i = elms.length,
                next = function () {
                    setTimeout(function () { elms.length ? cb(elms.shift()) : dfd.resolve(that); }, 0);
                },
                cb = function (elm) {
                $.when(c.call(elm, i - elms.length, $(elm))).done(function (result) {
                    dfd.notify(result);
                    next();
                });
                };

            next();

            return dfd.promise();
        }
    });
})(jQuery);


$(function() {         
    $("li").eachDeferred(function(i, elm){        
        return $.Deferred(function(dfd){ 
            var _t= +elm.data().timeout;
            setTimeout(function(){
                dfd.resolve({
                    idx: i,
                    timeout: _t
                });
            }, _t);            
        });
    }).progress(function(result){
        console.log("element #" + result.idx+ " done, loaded in " + result.timeout + " ms");
    }).done(function(){
        console.log("loop complete");
    });
});