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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_6291