數組或對象中的內容間隔顯示

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