Javascript 延迟显示阵列元素

我有一个数组

s=[John；Alex；Mark]

，我想以3秒的延迟一个接一个地显示这个数组的元素

for (var i=0; i<=3; i++)
  {
     setTimeout(function(){x.innerHTML=s[i]},3000)
  }

---

for（var i=0；i您的代码将不起作用，因为您一次设置了四个2000毫秒（即2秒）的超时。您最好使用闭包设置三个3000毫秒延迟的超时（按数组中的元素数）。可以使用以下代码完成（请注意，
setTimeout
是用小写字母编写的）:

var s=[“约翰”、“亚历克斯”、“马克”]；
对于（变量i=0；i

演示：

你的循环运行了四次，而不是三次
setTimeout
以小写字母开始
s
您的延迟应该是3000秒，持续3秒，而不是2000秒
你的延迟时间应该是
3000*i
，而不是
3000
，否则他们会立刻开火
如果没有特别的预防措施，就不能在异步回调中使用循环变量-回调都将看到分配给
i
的最后一个值，而不是在执行循环时的值
这样做可以完全避免循环变量问题：

var s = ['John', 'Mark', 'Alex'];
var i = 0;

(function loop() {
    x.innerHTML = s[i];
    if (++i < s.length) {
        setTimeout(loop, 3000);  // call myself in 3 seconds time if required
    }
})();      // above function expression is called immediately to start it off

var s=['John'，'Mark'，'Alex']；
var i=0；
（函数循环（）{
x、 innerHTML=s[i]；
如果（++i

注意它是如何使用“伪递归”在上一次迭代完成3000ms后触发下一次迭代的。这比让
n
未完成的计时器同时等待更好

请参见试一试

var s=['John', 'Alex', 'Mark'];
var x = document.getElementById('x');

function display(i){
    if(i >= s.length){
        i = 0;
    }

    x.innerHTML = s[i];
    setTimeout(function(){
       display(i + 1)
    }, 2000)
}

display(0)

演示：
如果不使用闭包，最终会导致i未定义。这是因为在每次迭代中，您都会覆盖i。当迭代完成时，i将未定义。使用闭包将保留i

另一方面，对值进行硬编码是毫无意义的（即i

我开始修补…虽然这可能不是最好的解决方案，但很有趣

var x = document.getElementById('x'),
    s = ['John', 'Mark', 'Alex'];

(function loop() {
    s.length && (x.innerHTML = s.shift(), setTimeout(loop, 3000));
})();

的解决方案要好得多。但是，它们都可以工作（his只是可读性更强，不太粗糙，也不会破坏阵列）。
您可以使用
setInterval
在延迟3秒后逐个显示元素：

s=["John", "Alex", "Mark"];

var i = 0;
var id = setInterval(function(){                
            if(i > s.length) {                  
                clearInterval(id);                  
            }
            else{
                console.log(s[i++]);
            }
}, 3000);

请不要使用伪递归来尝试此操作


var arr=[10,20,30,40]；//您的数组
var i=0；
var interval=2000//2秒，您可以添加所需的时间
函数callInterval（）{
//为setInterval设置一个变量
变量时间=设置间隔（（）=>{
log（'['+arr[i]+'，'+i+']）；
i++；
如果（i==arr.length）{
this.clearInterval（time）；//清除索引后的间隔
}
}，间隔）；
}
callInterval（）；
这也将有助于：

const fruits = ['apple', 'banana', 'mango', 'guava'];
let index = 0;
const primtMe = (value, i) => {
    if (i < fruits.length) {
        setTimeout(() => {
            console.log(i + ' value = ' + value)
            primtMe(fruits[i + 1], i + 1)
        }, 3000);
    } else {
        return;
    }
}

primtMe(fruits[index], index)

const-fruits=[‘苹果’、‘香蕉’、‘芒果’、‘番石榴’]；
设指数=0；
常量primtMe=（值，i）=>{
如果（i<水果长度）{
设置超时（（）=>{
console.log（i+'value='+value）
primtMe（水果[i+1]，i+1）
}, 3000);
}否则{
返回；
}
}
primtMe（水果[指数]，指数）
（至少）四行代码中有三个错误…您是否查看了浏览器中的控制台以查看错误消息？好的，将这五个错误设置为可能的重复项…注意，我投票认为这两个主要错误是重复的，但Alnitak发现了其他问题（OP应小心发现）.我认为这个问题不应该被删除。当循环到达列表末尾时，你为什么要重新开始循环？
s=["John", "Alex", "Mark"];

var i = 0;
var id = setInterval(function(){                
            if(i > s.length) {                  
                clearInterval(id);                  
            }
            else{
                console.log(s[i++]);
            }
}, 3000);

const fruits = ['apple', 'banana', 'mango', 'guava'];
let index = 0;
const primtMe = (value, i) => {
    if (i < fruits.length) {
        setTimeout(() => {
            console.log(i + ' value = ' + value)
            primtMe(fruits[i + 1], i + 1)
        }, 3000);
    } else {
        return;
    }
}

primtMe(fruits[index], index)