jQuery顺序函数在每个循环中一个接一个

Question

我知道这个话题已经在几篇文章中讨论过，但我似乎无法为我的特定用例做这件事。

所以我需要在一个接一个的页面上模拟将值输入到输入中。用户只是坐下来观看 - 但基本上我需要的是加载，第一个输入重点 > 逐字母输入一个值，然后移动到下一个输入以对其值执行相同操作。

到目前为止，这是我对我的代码的意思的一个小问题：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);  
            }
        });       
}

});

我在 jQuery 的每个循环中都有这个工作，但似乎无法让它按顺序工作，而不是同时工作。我猜我需要使用队列或承诺功能，但不确定如何使用。在每个循环中这样做的原因是不同的页面有不同的输入量，我想找到一个解决方案来通过选择器（类名）而不是手动来定位它。

任何帮助将不胜感激

Answer 1

您可以使用 Promises 链接一个有序的函数数组，如下所示：

$(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">