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) }

广州品牌设计公司https://www.houdianzi.com PPT模板下载大全https://redbox.wode007.com

对象的间隔显示

    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是异步，同步执行完再执行异步。