javascript：在for循环中使用settimeout定期显示文本_Javascript

javascript：在for循环中使用settimeout定期显示文本

javascript

javascript：在for循环中使用settimeout定期显示文本,javascript,Javascript,我想以固定的间隔（1秒）显示3行代码： <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> function showText() { var itemlist = document.getElements

我想以固定的间隔（1秒）显示3行代码：

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    function showText()
    {
        var itemlist = document.getElementsByClassName("test");
        function additem(index) {
            setTimeout(function(){itemlist[index].setAttribute("style", "display:block;");}, 1000);
        }
        for(var i=0;i<itemlist.length;++i) {
            additem(i);
        } 
    }
    </script>
    </head>

    <body>
        <input type="button" value="show" onClick="showText()">
        <div class="test" style="display:none">first</div>
        <div class="test" style="display:none">second</div>
        <div class="test" style="display:none">third</div>
    </body>
    </html>


函数showText（）
{
var itemlist=document.getElementsByClassName（“测试”）；
函数附加项（索引）{
setTimeout（函数（）{itemlist[index].setAttribute（“样式”，“显示：块；”）；}，1000）；
}
对于（var i=0；i您同时调用所有变量。为了清晰起见，只需使用line1

setTimeout(line1, 1000);
setTimeout(line2, 1000);
setTimeout(line3, 1000);

它们不“堆叠”。所有三个函数都将在1秒内运行
您有两个选项。选项1：
setTimeout(line1, (1 + index) * 1000);
setTimeout(line2, (1 + index) * 1000);
setTimeout(line3, (1 + index) * 1000);

这将导致它们一个接一个地超时
另一个选项是使超时调用成为下一个选项：
var index = 0;
function showNextLine() {
    // show line index
    index++;
    if (index < 3) {
       setTimeout(showNextLine, 1000);
    }
}
setTimeout(showNextLine, 1000);

var指数=0；
函数showNextLine（）{
//显示行索引
索引++；
如果（指数<3）{
设置超时（showNextLine，1000）；
}
}
设置超时（showNextLine，1000）；

这样，他们就像你所期望的那样“连锁”
还有其他变体，您甚至可以使用setInterval（）
和clearInterval（）

创建一个全局变量
使用setInterval函数
每次执行setInterval时的增量计数
如果到达最后一个，则从开始处重新开始（如果差异b/w编号divs和count小于1）
淡出除当前div之外的所有div


$（文档）.ready（函数（）{
var计数=0；
setInterval（函数（）{
showIframe（计数）；
计数++；
如果（（$（'.wall display'）.length-count）小于1）{
计数=0；
}
}, 1000);
函数showIframe（计数）{
$（'.wall display'）.fadeOut（'fast'）；
$（'#frame'+count）.fadeIn（'fast'）；
}
})；
。墙显示：非（：第一个子项）{
显示：无；
位置：绝对位置；
}

我是第一个发短信的
我是第二个文本
我是第三个文本
所以问题是，当你点击按钮时，你调用setTimeout 3次，所有这些setTimeout延迟都是1秒？你的解决方案是动态更改每个时间？你将每个元素的延迟时间增加1秒。正确。从现在起，它们都会延迟1秒，因此如果你想让它们间隔开的话art，你可以按顺序给每一个都增加一个更大的延迟。但是请注意，如果系统很忙，它们可能仍然会以这种方式一次全部触发…链接可以防止这种情况。