Javascript 显示li'；每2秒输入一次文本

按下

按钮后

我想按顺序显示在

输入中

，每两秒钟显示一次完整的列表文本

li

A--B--C--D--E

我试过了，但没用

 <button>show li in order every 2 seconds</button>

 <input type=text id="show" />

输入{
宽度：40px；
高度：40px；}

每2秒按顺序显示li

A
B
C
D
E

您需要使用

setInterval

并从

菜单中增量设置文本


$（“按钮”）。在（“单击”，函数（）{
变量项=$（“.menu li”），idx=0；
var timer=setInterval（函数（）{
var currText=items.eq（idx）.text（）
if（idx0）items.eq（idx-1）.hide（）；//hide previous

}, 2000);
});
输入{
宽度：40px；
高度：40px；
}

每2秒按顺序显示li

A
B
C
D
E
您可以使用一个（也称为链式超时）来完成此操作，否则结果将在最后一次显示所有结果（显示只有最后一个有效）

pop（）。使用
pop（）

我更喜欢使用嵌套的
setTimeout（）
而不是使用
setInterval（）
，因为setTimeout一完成就会再次调用自己，而setInterval会在计时器上重新运行。因此，如果完成函数有任何延迟，下一个setInterval仍将按计划运行，这意味着函数的多个实例可能会叠加


让arr=[]；
$（“按钮”）。单击（函数（）{
$（'.menu li'）。每个（函数（）{
arr.push（$（this.text（））；
});
arr=arr.reverse（）；
showChars（arr）；
});
功能显示字符（arr）{
if（arr.length==0）返回false；
设chr=arr.pop（）；
setTimeout（函数（）{
$（'#show'）.val（chr）；
showChars（arr）；
},1000);
}
输入{
宽度：40px；
高度：40px；
文本对齐：居中；
}

每2秒按顺序显示li

A
B
C
D
E
回答得很好。非常感谢。一个问题，请在到达最后一行后代码继续执行，还是停止？如果您希望它停止，请使用我作为注释添加的
clearInterval
方法，而不是
else idx=0
我理解。非常棒。最后一个问题。如果我想将先前的
li
内容在新行中隐藏一次……例如，在第
C
行中隐藏一次，然后在第
B
行中使用
.hide（）
和正确的索引，请参见回答中的编辑我看到了。但是在这种情况下，它没有隐藏最后一个
E
下面的答案对你有帮助吗？如果是，请选择一个“正确”答案（通过单击答案旁边的复选标记）以关闭问题，或者提供您自己的答案并选择该答案作为正确答案。在做出决定之前，请仔细阅读答案——未来的读者将受到你决定的影响。否则，请在其中一个答案下方添加评论或编辑原始问题以添加更多详细信息，以便提供更多答案。谢谢
$("button").on("click",function(){
    var dispIntrvl = $(this).attr("dispIntrvl");
    if(dispIntrvl) {
         clearInterval(dispIntrvl);
    }
    var indx = -1;
    var arr = [];
    $(".menu li").each(function(){
        arr.push($(this).text());
    });
    if(arr.length == 0)return;
    var shw = $("show");
    dispIntrvl = setInterval(function() {
        shw.val(arr[++indx]);
        if(indx == arr.length)indx = -1;
    }, 2000);
    $(this).attr("dispIntrvl", dispIntrvl);
});