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

时间: 2019-10-07阅读: 39标签: 对象

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



吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

4.休闲娱乐: 网页游戏入口... H5游戏入口... 绝地求生首次打折降价了点此访问

链接: http://www.fly63.com/article/detial/6291

js判断对象是否为空对象,判断对象中是否有某属性

判断一个对象是否为空对象,本文给出三种判断方法,断对象中是否有某属性的常见方式总结,不同的场景要使用不同的方式。通过点或者方括号可以获取对象的属性值,如果对象上不存在该属性,则会返回undefined。

vue事件获取当前对象

currentTarget:返回其监听器触发事件的节点,就是你的点击事件绑定在哪一个元素上 ,arget:返回事件的目标节点(触发该事件的节点),就是你当前点击的是哪一个元素

js Date对象

Date对象对日期和时间进行存储和计算;获取当前的系统时间new Date();返回值就是当前系统时间 ;new Date(1000*60*60*24),返回值是距离计算机元年对应的日期时间;获取Date中的日期时间

js判断一个对象是否为空对象

最近遇到一个问题,用vue循环一个数组,展示一些海报图片。数组为空的话是不会遍历的,为了不让能够出现默认图片,这也就需要在数组中增加一个默认空对象arr[{}]。问题来了,提交的时候怎么判断这个对象是空的呢?

Js event对象offsetX,pageX,screenX,clientX

平时在测量元素位置时难以确定,下面给出具体的event对象中的各种属性,以便日后使用。检测相对于浏览器的位置:clientX和clientY,当鼠标事件发生时,鼠标相对于浏览器左上角的位置

Js数学对象Math

写在前面:Javascript 中Math和其他对象不同,它具有数学常数和函数的属性和方法。因为它的属性是数学常数,所以不能被改变(可以进行赋值操作,但最后值不变)。Math的方法就是普通函数

深入JS对象属性

属性决定JS中对象的状态,本文章主要分析这些属性是如何工作的。JS有三种不同的属性:数据属性,访问器属性和内部属性。对象的普通属性将字符串名称映射到值。例如,下面对象obj有一个数据属性,名称为 prop,对应的值为 123:

原来JS是这样的_对象属性

同样的字符串赋值到对象,一会儿是字符串类型一会儿是对象,而明明不是对象类型的变量还是可以使用对象属性,为什么会这样呢?JavaScript 中一共有六种主要(语言)类型

JS 的 Document对象

Document 对象是是window对象的一个属性,因此可以将document对象作为一个全局对象来访问。当浏览器载入 HTML 文档, 它就会成为 Document 对象。Document对象的 属性和方法

Js创建对象的4种方式

创建对象的4种方式:方式一:通过对象字面量表示法(又称为直接量、原始方式)。object literals方式二:通过new和构造函数Object()、String()等。方式三:用自定义构造函数来初始化新对象。方式四:通过Object.create()

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全