for里面是采用setInterval遍历二维数组,for循环到最后一个数的时候,才执行setInterval的问题解决
点击播放看效果
- <!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的问题解决的更多相关文章
- C:指针遍历二维数组
C 指针遍历二维数组 http://blog.csdn.net/lcxandsfy/article/details/55000033 C++ 字符串指针与字符串数组 https://www.cnblo ...
- C/C++遍历二维数组,列优先(column-major)比行优先(row-major)慢,why?
C/C++遍历二维数组,列优先(column-major)比行优先(row-major)慢,why? 简单粗暴的答案:存在Cache机制! 稍微啰嗦一点:CPU访问内存(读/写,遍历数组的话主要是读) ...
- php中遍历二维数组并以表格的形式输出
一.索引数组 <?php //使用array()语句结构将联系人列表中所有数据声明为一个二维数组,默认下标是顺序数字索引 $contact1 = array( //定义外层数组 array(1, ...
- php中foreach循环遍历二维数组
最近在用tp3.2框架,在查询的时候用到了select(),这条语句返回的是二维数组,所以在对返回的数据做处理时,遇到了些麻烦,百度了下foreach,终于用foreach解决了数据的筛选问题 (因为 ...
- ANSI C遍历二维数组指针地址
#include <stdio.h> int main() { ][] = {,,,}; //等价于{{1,2},{3,4}}; ; i < ; i++) { ; j < ; ...
- C++入门经典-例6.11-使用指针变量遍历二维数组
1:代码如下: // 6.11.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #inc ...
- 20130330 printf数组改变 数组指针便利二维数组 二级指针遍历二维数组 ZigZag
1.为什么printf之后数组的值会改变? #include<stdio.h> ; int * Zigzag() { ,j=,limit=; ; ; int a[N][N]; int (* ...
- js 二维数组 for 循环重新赋值
javascript 二维数组的重新 组装 var arr = [[1,2],[3,4],[5,6],[7,8]]; var temp = new Array(); for(var i= 0 ;i&l ...
- PHP中遍历二维数组—以不同形式的输出操作
<body> <?php //定义二维索引数组$arr = array( array("101","李军","男", ...
随机推荐
- 【原创】大叔问题定位分享(29)datanode启动报错:50020端口被占用
集群中有一台datanode一直启动报错如下: java.net.BindException: Problem binding to [$server1:50020] java.net.BindExc ...
- linux日志过滤某时间段的日志
sed -n '/2019-01-10 16:00*/,/2019-01-10 18:48*/p' nohup.out > 111.log
- Android的路接下来该怎么走?
其实想写这篇文章好久了,很多小伙伴们也经常在群里探讨android移动开发者的走向,一部分人都想多快好省,间歇性踌躇满志.持续性混吃等死 ,只想用CV的开发模式们快速完成工作,然后回家王者农药.其实这 ...
- javascript 路径读取
//获取当前文件全路径 <script language="javascript"> alert(window.location.href); alert(window ...
- Canvas 画占比图 解决canvas锯齿 bug
案例如图: <section class=" chartWrap"> <div class="chartContent"> <di ...
- ubantu/centos修改系统时间
前言:有时系统上的时间和真实的时间对应不是,或者有特殊需求,需要修改系统时间.但是对应多台的服务器系统更改时间,手动的话很麻烦,这就需要写脚本或者搭建时间服务器了,统一时间,以下是对于一个不同系统修改 ...
- 圆周率pi π 与 角度的对应关系
圆周率pi π 与 角度的对应关系 π 180° π/2 90° π/4 45° π/6 30°
- selenium之使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
https://www.cnblogs.com/JHblogs/p/7699951.html
- Android源代码下载 “Gerrit下载源代码”
repo init -u ssh://jenkins@gerrit.y:29419/manifest -m k86A.xml 使用-m参数指定具体使用的是k86A.mxl文件 步骤1. curl ht ...
- 2017-2018 ACM-ICPC Pacific Northwest Regional Contest (Div. 1)
A. Odd Palindrome 所有回文子串长度都是奇数等价于不存在长度为$2$的偶回文子串,即相邻两个字符都不同. #include<cstdio> #include<cstr ...