Question

我有一个数组s=[John; Alex; Mark]，我想逐个延迟地显示这个数组的元素。

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

这似乎很简单的问题，但我无法弄明白。

Answer 1

你的循环运行四次，而不是三次
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

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

请参阅http://jsfiddle.net/alnitak/mHQVz/

Answer 2

http://jsfiddle.net/rlemon/mHQVz/1/

我需要修修补补......虽然这可能不是最有趣的解决方案。

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

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

Alnitak的解决方案更好。然而，它们都可以工作（他只是更可读，更少hacky也不会破坏数组）。

Answer 3

您的代码无效，因为您一次设置四个超时2000毫秒（即 2秒）。您最好使用闭包设置三个超时（按数组中的元素数量），延迟 3000毫秒。可以使用以下代码完成（注意setTimeout是从小写字母写的）：

var s = ["John", "Alex", "Mark"];
for (var i = 0; i < s.length; i++) {
    (function(i) {
        setTimeout(function() {
            x.innerHTML = s[i];
        }, 3000 * i);
    })(i);
}

DEMO： http://jsfiddle.net/6Ne6z/

Answer 4

尝试

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)

演示：Fiddle

Answer 5

如果你不使用闭包，你最终将被定义为未定义。这是因为在每次迭代中，你都要重写我的意思。到它完成时，它将是未定义的。使用闭包将保留i。

另一方面，当您可以检查长度时，对值中的硬编码（即i <3）有点无意义。这样，如果s发生变化，你的for循环仍会抓住所有东西。

var s = ['john','mark','brian'];
for (var i = 0; i < s.length; i++) {
    (function(i) {
        setTimeout(function() {
            x.innerHTML = s[i];
        }, 3000*(i+1));
    })(i);
}

Answer 6

您可以使用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);

Answer 7

尝试此操作而无需伪递归

var arr = [10,20,30,40]; // your array
var i = 0;
var interval = 2000 // 2 sec, you can add your time required
function callInterval() {
// set a variable for setInterval
	var time = setInterval(()=>{
		console.log('['+arr[i]+','+i+']');
		i++; 
		if(i==arr.length){
			this.clearInterval(time);// clear the interval after the index
		}
		}, interval);
}

callInterval();

Answer 8

这也将有所帮助：

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)

显示延迟的数组元素

8 个答案: