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

JS数组或对象中的内容间隔显示基础知识教程

使用for循环的代码

JS数组或对象中的内容间隔显示基础知识教程_对象使用说明

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

海计划公众号
(0)
上一篇 2020/03/23 18:38
下一篇 2020/03/23 18:38

您可能感兴趣的内容

  • React 项目结构和组件命名之道小白知识_react教程视频

    React 作为一个库,不会决定你如何组织项目的结构。这是件好事,因为这样我们有了充分的自由去尝试不同的组织方式并且选取最适合我们的方式。但是从另一个角度讲,这可能会让刚刚上手 React 的开发者产生些许困惑。我将会在本文为大家展示我已经使用过一段时间并且效果不错的方式,这些方式没有通过重新造轮子来实现,而是通过将社区中的方案组合和提炼得到。注意:这里没有

    2020/04/03
  • php底层原理之垃圾回收机制小白帮助_内存基础知识教程

    php垃圾回收机制,对于PHPer来说是一个不陌生但是又不是很熟悉的内容。那么php是怎么实现对不需要的内存进行回收的呢?php变量的内部存储结构首先还是需要了解下基础知识,便于垃圾回收原理内容的理解。大家都知道php是由C编写而成的,所以php变量的内部存储结构也会和C语言相关,即zval的结构体:struct _zval_struct {union {l

    2020/03/31
  • JavaScript 语法流派现状调查基础知识入门_语法使用说明

    我们通常会有意无意的把JavaScript和其他编程语言区分开,有一个重要因素是……由于它的特性本身(太灵活了吧),它似乎不仅仅是一种语言,而更像是一帮老司机在矫情造作之下乱伦出来的生态系统。因而,自 CoffeeScript 在2009年问世之后,便一发不可收拾的又涌出了众多转译语法,什么ES6、TypeScipt、Elm等等,它们都各有特色,提高了写码效

    2020/04/03
  • Joomla使用说明一套全球知名的内容管理系统

    Joomla使用攻略 官方网址:http://www.joomlachina.cn/ 简介描述:一套全球知名的内容管理系统 Joomla!是使用PHP语言加上MySQL数据库所开发…

    2020/03/06
  • vue实现输入框的模糊查询(节流函数的应用场景)基础入门_输入框小白知识

    首先,我们来理解一下:节流函数首先是节流,就是节约流量、内存的损耗,旨在提升性能,在高频率频发的事件中才会用到,比如:onresize,onmousemove,onscroll,oninput等事件中会用到节流函数;输入框的模糊查询功能原理分析所谓模糊查询就是不需要用户完整的输入或者说全部输入信息即可提供查询服务,也就是用户可以在边输入的同时边看到提示的信息

    2020/03/24
  • JS垃圾回收机制小白攻略_机制攻略教程

    原理:找出不再继续使用的变量,然后释放掉其占用的内存。策略1:标记清除当变量进入环境(可以理解为一个函数开始执行了)时,就将这个变量标记为“进入环境”,从逻辑上讲,不能释放掉进入环境的变量,而当变量离开环境的的时候,则将其标记为离开环境。垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记。去掉环境中的变量以及被环境中的变量引用的变量的标记。此后再被加

    2020/03/30
  • fontfabric入门知识一款免费独立字体设计网

    fontfabric基础入门 官方网址:http://www.fontfabric.com/ 简介描述:一款免费独立字体设计网 FontFabric:免费独立字体设计网是一个提供独…

    2020/03/05
  • family.scss基础知识入门_一套26个智能Sass mixins

    family.scss基础知识入门 官方网址:http://lukyvj.github.io/family.scss GitHub:https://github.com/LukyV…

    2020/03/06
  • ES6变量的解构赋值小白知识_解构入门百科

    1.什么是解构?ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。它在语法上比ES5所提供的更加简洁、紧凑、清晰。它不仅能减少你的代码量,还能从根本上改变你的编码方式。2.数组解构以前,为变量赋值,我们只能直接指定值,比如let a = 1;
    let b = 2;
    let c = 3;现在可以用数组解构的方式来进行赋值let [a

    2020/03/20
  • js操作DOM对象小白攻略_dom菜鸟知识

    1.创建元素创建元素:document.createElement() 使用document.createElement()可以创建新元素。这个方法只接受一个参数,即要创建元素的标签名。这个标签名在HTML文档中不区分大小写,在XHTML中区分大小写。var div = document.createElement(“div”);使用createEleme

    2020/03/24
  • Js中for、for…of 、for…in 等 iteration 效率测试基础教程_测试使用帮助

    由于不同浏览器,不同版本性能不一,且控制台本质是是套用了一大堆eval,沙盒化程度高,所以需使用node环境测试来提高准确性
    // 准备待测数组
    const NUM = 1e7;
    let arr = new Array(NUM).fill(1);
    // for 测试
    let arr1 =[];
    console.time(‘for’);
    for (let i

    2020/03/29
  • HTML5常用API基础知识教程_api使用攻略

    页面可见性API——Page Visibility
    API全屏API——Full Screen
    访问摄像头和麦克风——getUserMedia API
    电池API——Battery API
    预加载——Link Prefetching
    监听屏幕旋转变化接口: ——orientationchange
    手机震动: ——window.navigator.vibrat

    2020/03/22
  • 将async/await编译到 ES3/ES5 (外部帮助库)小白知识_async基础指南

    自2015年11 发布1.7版以来,TypeScript 已支持 async/await 关键字。编译器使用 yield 将异步函数转换为生成器函数。这意味着咱们无法针对 ES3 或 ES5,因为生成器仅在 ES6 中引入的。TypeScript 2.1 现在支持将异步函数编译为 ES3 和 ES5。与生成的其余代码一样,它们在所有 JS 环境中运行。(这甚

    2020/03/23
  • 宅客学院菜鸟指南IT职业教育线上品牌,课程涵盖大数据、前端开发、后端开发等,免费课程挺多的。

    宅客学院入门指南 官方网址:http://www.zhaikexueyuan.com/ 简介描述:IT职业教育线上品牌,课程涵盖大数据、前端开发、后端开发等,免费课程挺多的。

    2020/03/06
  • 锤子简历入门教程_原创简历制作平台

    锤子简历入门教程 官方网址:https://www.100chui.com/ 简介描述:原创简历制作平台 锤子简历全国最专业的简历制作平台,是拥有海量、精美、原创优质的电子版简历模…

    2020/03/10
  • 可以网上聊骚的网聊直播app神器入门基础教程_直播使用攻略

    随着互联网的发展,很多人足不出户就可以交到新朋友,一部手机在手,天下美女我有。但是很多人和异性聊天的时候总是忍不住想要“开下车”,但是又怕对方会反感,那么有没有免费聊污的软件呢?有什么软件可以让你放心大胆的在秋名山上“飙车”,同时也会让你学到更多的“姿势”。相信这些软件一定可以满足你的需求,各种话题让你尽情的畅聊。社交软件上的小姐姐们,点击下载在网络上,隔着

    2020/03/29