jQuery顺序函数在每个循环中一个接一个 [英] jQuery sequential functions one after the other in a each loop

问题描述

我知道这个话题已经在几篇文章中讨论过了，但是我似乎无法为我的特定用例做好准备.

因此，我需要一个接一个地模拟将值的类型输入到页面上的输入中.用户只需坐着看-但是本质上我需要的是负载，第一个输入的焦点是>逐个字母地输入一个值，然后移至下一个输入以对其值进行相同操作.

这是到目前为止我对我的代码的意思的小提琴: https://codepen.io/samwoodchs/pen/WNxYmPj

  $(document).ready(function(){$('.typein').each(function(i, el) {var value = $(this).data('value');$(this).focus();$(this).val('');//清除typeText($(this)，value，150，0);});函数typeText(item，text，delay，i){$(item).val($(item).val()+ text.charAt(i)).delay(延迟).承诺().done(function(){if(i< text.length){i ++;typeText(item，text，delay，i);}});}}); 

我在jQuery的每个循环中都进行了此操作，但似乎无法使其按顺序工作而不是同时工作.我猜我需要使用队列或Promise函数，但不确定如何使用.在每个循环中执行此操作的原因是不同的页面具有不同的输入量，我想找到一种解决方法，以选择器(类名)而不是仅目标对象为目标.

任何帮助将不胜感激

解决方案

您可以使用Promises链接如下这样的有序函数数组:

  $(document).ready(function(){const delay = 150;$('.typein').data('value'，'other value');const函数= $('.typein').map((_，item)=> typeText(item)).get();chainAndExecDelayedFunctions(functions，delay);函数typeText(item){返回 [()=>{$(item).focus();$(item).val('');}] .concat($(item).data('value').split('').map(char =>()=> {$(item).val($(item).val()+ char);}));}function chainAndExecDelayedFunctions(functions，delay){functions.reduce((acc，cur)=> {返回acc.then(()=>新Promise(resolve => setTimeout(()=> {解决();cur();}， 延迟)));}，Promise.resolve())；}});  

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

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

解决方案

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

这篇关于jQuery顺序函数在每个循环中一个接一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！