Javascript:setTimeout闭包内嵌套（双精度）for循环

嗨，我正在尝试重新创建搜索文本框的功能-显示键入的字符并在几个短语之间旋转

我最初的逻辑是从如下数组中读取短语：

[abc，123，XYZ]

，然后使用

split

和

forEach

将字符串分隔为字符，并使用

setTimeout

创建键入效果

然而，当我尝试这种逻辑时，我似乎很难达到预期的效果。我已经阅读了很多这样的问题，但是很少有人用嵌套for循环来解决这些问题

期望的结果：

• a b c（在一个字符一个字符的打字效果中）
• 清除文本框
• 1 2 3（在逐字打印效果中）
• 清除文本框
• X Y Z

实际结果：

• abc123XYZ（abc同时出现，后面是123，然后是XYZ）

$（文档）.ready（函数（）{
$（'input#123'）.attr（“占位符”，”）；
变量短语=['abc'，'123'，'XYZ']；
对于（var i=0；i
javascript的优点是闭包，因此您可以创建函数闭包，并将其推到数组上，使其像堆栈一样工作。。然后，您可以在设置间隔内关闭这些函数


$（文档）.ready（函数（）{
变量输入=$（'input#123'），
短语=['Stack Overflow'，'Is the place your come'，'To get help with coding stuff']，
类型延迟=140，
waitops=5，
cmds=[]，
ph=input.attr.bind（输入“占位符”）；
函数clear（）{
ph（“”）；
}
函数addLetter（a）{
返回函数（）{
ph（ph（）+a）；
}
}
函数doLoop（）{
cmds=[]；
对于（var i=0；ijavascript的最大优点是闭包，因此您可以创建函数闭包，并将其推到数组上，使其像堆栈一样工作。然后，您可以在setInterval内弹出这些函数


$（文档）.ready（函数（）{
变量输入=$（'input#123'），
短语=['Stack Overflow'，'Is the place your come'，'To get help with coding stuff']，
类型延迟=140，
waitops=5，
cmds=[]，
ph=input.attr.bind（输入“占位符”）；
函数clear（）{
ph（“”）；
}
函数addLetter（a）{
返回函数（）{
ph（ph（）+a）；
}
}
函数doLoop（）{
cmds=[]；
对于（var i=0；i，这里有一个递归函数，它移动数组并在数组没有长度时停止


typePhrases（['Message#1'，'other Message'，'And last one']，300）
功能类型短语（短语、速度）{
//移位数组以获取单词/短语
var word=phrases.length&&phrases.shift（），$input=$（'#test'）.attr（'占位符'，''）；
//如果没有短语/单词，不要做任何事情
如果（字）{
word.split（“”）.forEach（函数（char，i）{
setTimeout（函数（）{
//使用attr（attributeName，function）更新
$input.attr（'placeholder'，函数（\u，curr）{
返回curr+char；
});
//在最后一个字母上再次调用函数以获取下一个单词
if（i==word.length-1）{
setTimeout（函数（）{
打字短语（短语、速度）；
}，速度）；
}
}，i*速度）
});
}   
}
这里有一个递归函数，它移动数组并在数组没有长度时停止


typePhrases（['Message#1'，'other Message'，'And last one']，300）
功能类型短语（短语、速度）{
//移位数组以获取单词/短语
var word=phrases.length&&phrases.shift（），$input=$（'#test'）.attr（'占位符'，''）；
//如果没有短语/单词，不要做任何事情
如果（字）{
word.split（“”）.forEach（函数（char，i）{
setTimeout（函数（）{
//使用attr（attributeName，function）更新
$input.attr（'placeholder'，函数（\u，curr）{
返回curr+char；
});
//在最后一个字母上再次调用函数以获取下一个单词
if（i==word.length-1）{
setTimeout（函数（）{
打字短语（短语、速度）；
}，速度）；
}
}，i*速度）
});
}   
}

基本上所有设置超时都将同时运行..使用递归函数而不是外循环..当索引位于内循环末尾时调用它基本上所有设置超时都将同时运行..使用递归函数而不是外循环..当索引位于内循环末尾时调用它谢谢Keith！这太棒了。我如何才能弄清楚文本框焦点上的循环？我还注意到我们已经多次获得/设置了占位符属性。javascript的另一个很好的功能是绑定，在这里我创建了一个名为ph（）的函数，它基本上是执行input.attr（'placeholder'，..），所以不是input.attr（'placeholder'，'x'），你可以只做ph（'x'），x=input.attr（'placeholder'），我们做x=ph（）；来自Delphi/C#习惯javascript的动态特性需要一些时间，但我使用的越多，我就越喜欢：）谢谢Keith！这真是太棒了。我怎么才能弄清楚文本框焦点上的循环呢？我还注意到我们已经多次获得/设置了占位符属性。javascript的另一个很好的特性是绑定，在这里我创建了一个名为ph（）的函数，它基本上执行input.attr（'placeholder'，…），而不是input.attr（'占位符