JS数组或对象中的内容间隔显示基础知识教程
使用for循环的代码
var arr = [1, 2, 3, 4, 5];
for (var i = 0; i < arr.length; i++) {
(function(a) {
setTimeout(function() {
console.log(arr[a]);
}, 5000);
})(i);
}
会在5秒中之后几个数字几乎一起显示,并不是我们希望的间隔5秒显示一个数字。
下面是数组和对象间隔显示的代码
数组的第一种方法
var i = 0; //在外面定义一个变量作为判断的标准
var arr = [1, 2, 3, 4, 5]
var timer = setInterval(function() {
console.log(arr[i]);
i++;
if (i > arr.length - 1) { //因为i++的原因,所以当i的值大于数组的长度-1的时候,清除定时器
clearInterval(timer);
}
}, 1000);
数组的第二种方法(用setTimeout执行间隔显示的效果)
var i = 0; //在外面定义一个变量作为判断的标准
var arr = [1, 2, 3, 4, 5]
showNum()
function showNum() {
console.log(arr[i])
i++
if (i == arr.length) i = 0
setTimeout(function() {
showNum()
}, 1000)
}
对象的间隔显示
var obj = { a: 1, b: 2 }
var objKey = Object.keys(obj)
var index = 0
console.log(objKey)
var timer = setInterval(function() {
console.log(obj[objKey[index]])
index++
if (index == objKey.length) index = 0
}, 1000)
总结:
间隔显示,不要使用for 循环,原因是for循环是同步,setTimeout是异步,同步执行完再执行异步。