Javascript jQuery使用.each（）更新元素

HTML代码：

div id="updatePanel">​ 我希望updatePanel div内容每5秒更新一次。应该是1，然后等待5秒，显示2，再等待5秒

它不像我预期的那样工作。它等待5秒并显示9

请参见此处的演示：

更改

}，5000）到
}，5000*索引）

这将使每个项目比前一个项目多等待5秒

请记住，所有超时都是在同一时间创建的，但延迟时间不同

最好从一个超时开始，并在每次执行时创建下一个超时

像这样

var data=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    function update(idx){
        setTimeout(function(){
        $('#updatePanel').text( data[idx] );
        if (idx < data.length - 1)
            update(idx+1);
        },1000);
    }

update(0);

var数据=[1,2,3,4,5,6,7,8,9,10]；
函数更新（idx）{
setTimeout（函数（）{
$（'#updatePanel'）.text（数据[idx]）；
if（idx
“请记住，所有超时都是同时创建的…”我不完全理解这一部分。我想，每个都和for循环基本相同。下面的代码：$.each（数据、函数（索引、值）{$（'updatePanel'）.html（索引）；}）；应该循环遍历每个元素并按顺序更新updatePanel。这是$.each（数据、函数（索引、值）{setTimeout（函数（）{$（'#updatePanel'）.text（索引）；}，5000）；}）；应每5秒设置一次超时。你能解释一下为什么会同时创建超时吗？谢谢。@user187870，就像在循环中一样，您的超时都是在毫秒内创建的。它们都会等待5秒钟，所以它们几乎同时过期，所以更新会发生在它们身上，最后一个就是您在div中看到的。。在我的示例中，我们将每个的延迟乘以它们在数组中的索引，因此第一个将等待5000x1，第二个将等待5000x2，以此类推。。（实际上每5秒钟一次）虽然它有一个被接受的答案，但我投票重新打开，因为它现在是一个有效的问题。。并且可以提供其他信息。。
var data=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    function update(idx){
        setTimeout(function(){
        $('#updatePanel').text( data[idx] );
        if (idx < data.length - 1)
            update(idx+1);
        },1000);
    }

update(0);