前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >数组或对象中的内容间隔显示

数组或对象中的内容间隔显示

作者头像
tianyawhl
发布2019-11-07 19:46:05
4.2K0
发布2019-11-07 19:46:05
举报
文章被收录于专栏:前端之攻略前端之攻略

使用for循环的代码

代码语言:javascript
复制
    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秒显示一个数字。

下面是数组和对象间隔显示的代码

数组的第一种方法

代码语言:javascript
复制
    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执行间隔显示的效果)

代码语言:javascript
复制
    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)

    }

对象的间隔显示

代码语言:javascript
复制
    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是异步,同步执行完再执行异步。

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 下面是数组和对象间隔显示的代码
    • 数组的第一种方法
      • 数组的第二种方法(用setTimeout执行间隔显示的效果)
        • 对象的间隔显示
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档