分享程序员开发的那些事...
更新时间：2022-12-26 23:23:53
您可以使用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">