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