点击播放看效果

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>for里面是采用setInterval遍历二维数组，for循环到最后一个数的时候，才执行setInterval的问题解决</title>
  9. </head>
  10. <body>
  11. <button id="play">播放</button>
  12. <script>
  13.    var sumPath=[
  14.        {
  15.            RowKey:"LNBSCB3F2FD11327120190327091134",
  16.            point:[
  17.            {Longitude: "104.074027",Latitude:"30.707441"},
  18.            {Longitude: "104.109422", Latitude: "30.669311"},
  19.            {Longitude: "104.108675", Latitude: "30.665402"},
  20.            {Longitude: "104.108667", Latitude: "30.665388"}]},
  21.        {
  22.            RowKey:"LNBSCB3F2FD11327120190327103555",
  23.            point:[
  24.                {Longitude: "104.113186", Latitude: "30.663265"},
  25.                {Longitude: "104.114061", Latitude: "30.663335"},
  26.                {Longitude: "104.11468", Latitude: "30.663531"},
  27.                {Longitude: "104.115255", Latitude: "30.663612"},
  28.                {Longitude: "104.11565", Latitude: "30.663767"}
  29.        ]
  30.    }];
  31.  
  32.     // 怎么按顺序遍历二维数组  ，如果是for里面是一个setInterval，则到for循环到最后一个数的时候，才执行setInterval。 需要用2个setInterval来解决，setInterval是异步的，里面却是同步的
  33.     document.getElementById("play").addEventListener("click",function () {
  34.         firstTraverse();
  35.     });
  36.     var firstIndex=0;// 第一层数组的index
  37.     var secondIndex=0;// 第二层数组的index
  38.     // 第一层的遍历
  39.     function firstTraverse () {
  40.         var firstInterval=setInterval(function () {
  41.             clearInterval(firstInterval);
  42.             if(firstIndex<sumPath.length){
  43.                 var point=sumPath[firstIndex].point;
  44.                 secondTraverse(point);// 第二层数组传过去
  45.                 console.log("第一层的index："+firstIndex);
  46.             }
  47.         },1000)
  48.     }
  49.     // 第二层的遍历
  50.     function secondTraverse (point) {
  51.         var secondInterval=setInterval(function () {
  52.             if(secondIndex<point.length){
  53.                 console.log("第二层的index："+secondIndex);
  54.                 drivePath();
  55.             }else {
  56.                 clearInterval(secondInterval);// 要清的是第二个定时器
  57.                 secondIndex=0;
  58.                 firstIndex++;
  59.                 firstTraverse();// 从第一个开始重新调用
  60.                 return;
  61.             }
  62.             secondIndex++;
  63.         },1000)
  64.     }
  65.     // 划线
  66.     function drivePath() {
  67.  
  68.     }
  69. </script>
  70. </body>
  71. </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. 【batch】命令对比两个文件夹下的文件（增删改的对比）

    1.分别打印两个目录的结构 TREE D:\SOURCE /A /F >D:\SOURCE.TXT TREE D:\DEST /A /F >D:\DEST.TXT 2.然后使用工具/命令进 ...

  2. Eclipse安装git插件以及关联导入GitHub项目

    一.Eclipse配置git 1.查看自己eclipse的版本 打开eclipse 导航: help->AboutEclipse 如图: 2.检查Eclipse中是否已安装Git插件 菜单栏He ...

  3. 学习笔记: yield迭代器

    yield 与 IEnumerable<T> 结对出现, 可实现按需获取 , 迭代器模式 static void Main(string[] args)         {         ...

  4. 简单检测PHP运行效率脚本

    <?php $stratTime = microtime(true); $startMemory = memory_get_usage(); $a = 1; for($i = 1; $i < ...

  5. html_基础标签

    块级标签: 默认情况会占位一整行行内(内联)标签:默认只有自己的大小 块级标签如: <div>我是字</div>  <h1>标题1</h1>  < ...

  6. Docker 学习1 容器技术基础入门

    一.虚拟化 1.主机级别虚拟化(两种) a.类型一虚拟化:在硬件上直接安装hyper-ver,然后再安装虚拟机 1).操作系统就两棵树:进程树,文件系统树. 2).一个内核只能有一个root b.类型 ...

  7. HDU 5984.Pocky(2016 CCPC 青岛 C)

    Pocky Let’s talking about something of eating a pocky. Here is a Decorer Pocky, with colorful decora ...

  8. 利用kibana插件对Elasticsearch进行文档和索引的CRUD操作

    #添加索引PUT lagou { "settings": { "index": { , } } }#查看 索引设置 GET lagou/_settings GE ...

  9. vue实现数据双向绑定的原理

    一.知识准备Object.defineProperty( )方法可以直接在一个对象上定义一个新属性,或者修改一个已经存在的属性,并返回这个对象.Object.defineProperty(obj,pr ...

  10. 关于FastReport在winform中的使用（包含FastReport.net的安装步骤链接）

    一.FastReport的简介 FastReport是功能齐全的报表控件,使开发者可以快速并高效地为·NET/VCL/COM/ActiveX应用程序添加报表支持. 二.FastReport的安装(推荐 ...