点击播放看效果

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>for里面是采用setInterval遍历二维数组，for循环到最后一个数的时候，才执行setInterval的问题解决</title>

</head>

<body>

<button id="play">播放</button>

<script>

   var sumPath=[

       {

           RowKey:"LNBSCB3F2FD11327120190327091134",

           point:[

           {Longitude: "104.074027",Latitude:"30.707441"},

           {Longitude: "104.109422", Latitude: "30.669311"},

           {Longitude: "104.108675", Latitude: "30.665402"},

           {Longitude: "104.108667", Latitude: "30.665388"}]},

       {

           RowKey:"LNBSCB3F2FD11327120190327103555",

           point:[

               {Longitude: "104.113186", Latitude: "30.663265"},

               {Longitude: "104.114061", Latitude: "30.663335"},

               {Longitude: "104.11468", Latitude: "30.663531"},

               {Longitude: "104.115255", Latitude: "30.663612"},

               {Longitude: "104.11565", Latitude: "30.663767"}

       ]

   }];

    // 怎么按顺序遍历二维数组  ，如果是for里面是一个setInterval，则到for循环到最后一个数的时候，才执行setInterval。 需要用2个setInterval来解决，setInterval是异步的，里面却是同步的

    document.getElementById("play").addEventListener("click",function () {

        firstTraverse();

    });

    var firstIndex=0;// 第一层数组的index

    var secondIndex=0;// 第二层数组的index

    // 第一层的遍历

    function firstTraverse () {

        var firstInterval=setInterval(function () {

            clearInterval(firstInterval);

            if(firstIndex<sumPath.length){

                var point=sumPath[firstIndex].point;

                secondTraverse(point);// 第二层数组传过去

                console.log("第一层的index："+firstIndex);

            }

        },1000)

    }

    // 第二层的遍历

    function secondTraverse (point) {

        var secondInterval=setInterval(function () {

            if(secondIndex<point.length){

                console.log("第二层的index："+secondIndex);

                drivePath();

            }else {

                clearInterval(secondInterval);// 要清的是第二个定时器

                secondIndex=0;

                firstIndex++;

                firstTraverse();// 从第一个开始重新调用

                return;

            }

            secondIndex++;

        },1000)

    }

    // 划线

    function drivePath() {

    }

</script>

</body>

</html>

for里面是采用setInterval遍历二维数组，for循环到最后一个数的时候，才执行setInterval的问题解决的更多相关文章

  1. C：指针遍历二维数组

    C 指针遍历二维数组 http://blog.csdn.net/lcxandsfy/article/details/55000033 C++ 字符串指针与字符串数组 https://www.cnblo ...

  2. C/C++遍历二维数组，列优先(column-major)比行优先(row-major)慢，why？

    C/C++遍历二维数组,列优先(column-major)比行优先(row-major)慢,why? 简单粗暴的答案:存在Cache机制! 稍微啰嗦一点:CPU访问内存(读/写,遍历数组的话主要是读) ...

  3. php中遍历二维数组并以表格的形式输出

    一.索引数组 <?php //使用array()语句结构将联系人列表中所有数据声明为一个二维数组,默认下标是顺序数字索引 $contact1 = array( //定义外层数组 array(1, ...

  4. php中foreach循环遍历二维数组

    最近在用tp3.2框架,在查询的时候用到了select(),这条语句返回的是二维数组,所以在对返回的数据做处理时,遇到了些麻烦,百度了下foreach,终于用foreach解决了数据的筛选问题 (因为 ...

  5. ANSI C遍历二维数组指针地址

    #include <stdio.h> int main() { ][] = {,,,}; //等价于{{1,2},{3,4}}; ; i < ; i++) { ; j < ; ...

  6. C++入门经典-例6.11-使用指针变量遍历二维数组

    1:代码如下: // 6.11.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #inc ...

  7. 20130330 printf数组改变 数组指针便利二维数组 二级指针遍历二维数组 ZigZag

    1.为什么printf之后数组的值会改变? #include<stdio.h> ; int * Zigzag() { ,j=,limit=; ; ; int a[N][N]; int (* ...

  8. js 二维数组 for 循环重新赋值

    javascript 二维数组的重新 组装 var arr = [[1,2],[3,4],[5,6],[7,8]]; var temp = new Array(); for(var i= 0 ;i&l ...

  9. PHP中遍历二维数组—以不同形式的输出操作

    <body> <?php //定义二维索引数组$arr = array(    array("101","李军","男", ...

随机推荐

  1. 【原创】大数据基础之Hive（1）Hive SQL执行过程之代码流程

    hive 2.1 hive执行sql有两种方式: 执行hive命令,又细分为hive -e,hive -f,hive交互式: 执行beeline命令,beeline会连接远程thrift server ...

  2. 【原创】大叔问题定位分享（1）HBase RegionServer频繁挂掉

    最近hbase集群很多region server挂掉,查看其中一个RegionServer1日志发现,17:17:14挂的时候服务器压力很大,有大量的responseTooSlow,也有不少gc,但是 ...

  3. css 初始化样式

    @charset "UTF-8"; /* reset */ html,body,div,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,ul,li,fieldset ...

  4. WPF 单个触发器、多个触发器、多条件触发器

    Trigger的使用.利用Trigger对象,我们可以接收到属性变化或者事件发生,并据此做出适当的响应.Trigger本身也是支持多种类型的,下面是一个属性Trigger的例子: <Style ...

  5. liunx redis集群添加密码

    第一种方法: 修改每个节点redis.conf配置文件: masterauth 123456 requirepass 123456 各个节点的密码都必须一致,否则Redirected就会失败 重新启动 ...

  6. Vofuria ARCamera相机问题

    想要发射 射线 Camera.allCameras[0] 该语句来选择相机:Camera.main 此语句只能找到Tag为MainCamera的相机:

  7. jsp 异步处理

    一.  概述 异步处理功能可以节约容器线程.你应该将此功能 使用在长时间运行的操作上.此功能的作用是释放正在 等待完成的线程,使该线程能够被另一请求所使用. 二. 编写异步Servlet和过滤器 We ...

  8. 忘记加入spring-aop-4.3.16.RELEASE.jar出错

    出错代码: java.lang.NoClassDefFoundError: org/springframework/aop/framework/AopProxyUtils at org.springf ...

  9. 微信小程序 canvas 内容（宽高） 兼容不同机型

    此功能并没有做所有机型测试,后面会一个一个做一下,如需使用请先自作测试! canvas在小程序中设定的尺寸默认是px 并不是rpx的 所以需要转换一下 PS:设计稿是750像素 wx.getSyste ...

  10. Android 后台应用保活、消息推送

    3.针对以往Android版本的各种保活技术回顾 Android P之前为了搞定客户的投诉:“为什么微信能收到消息而你们的IM却不能?”,为了解决这个“痛点”,广大的Android开发者们只能让各种黑 ...