jQuery sequential functions one after the other in a each loop

Question

I know this topic has been discussed in a couple of posts but I can't seem to get my head around doing this for my particular use case.

So I have a need to simulate the typing of values into inputs on a page one after the other. The user simply sits and watches - but essentially what I need is on load, the first input focuses > types in letter by letter a value, and then moves to the next input to do the same with it's value.

Here is a fiddle of what I mean with my code so far: https://codepen.io/samwoodchs/pen/WNxYmPj

$(document).ready(function(){

$('.typein').each(function(i, el) {
    var value = $(this).data('value');

    $(this).focus();
    $(this).val(''); //clear
    typeText($(this), value, 150, 0);

});

function typeText(item, text, delay, i) {
    $(item).val($(item).val() + text.charAt(i))
        .delay(delay)
        .promise()
        .done(function() {
            if(i<text.length) {
                i++;
                typeText(item, text, delay, i);  
            }
        });       
}

});

I have this working in a jQuery each loop, but can't seem to get it to work sequentially rather than all at the same time. I'm guessing I need to ultilise either queues or promise functions but not sure how. The reason for doing this in an each loop is different pages have different input amounts and I would like to find a solution to target this by selector (class name) rather than maunally.

Any help would be greatly appreciated

Answer 1

You could use Promises to chain an ordered array of functions like this:

$(document).ready(function () {

    const delay = 150;
    $('.typein').data('value', 'other value');

    const functions = $('.typein').map((_, item) => typeText(item)).get();
    chainAndExecDelayedFunctions(functions, delay);

    function typeText(item) {
        return [
            () => {
                $(item).focus();
                $(item).val('');
            }
        ].concat($(item).data('value').split('').map(char => () => {
                $(item).val($(item).val() + char);
            }));
    }

    function chainAndExecDelayedFunctions(functions, delay) {
        functions.reduce((acc, cur) => {
            return acc.then(() => new Promise(resolve => setTimeout(() => {
                        resolve();
                        cur();
                    }, delay)));
        }, Promise.resolve());
    }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="typein" value="initial value">
<input class="typein" value="initial value">
<input class="typein" value="initial value">
<input class="typein" value="initial value">
<input class="typein" value="initial value">
<input class="typein" value="initial value">
<input class="typein" value="initial value">
<input class="typein" value="initial value">