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","李军","男", ...
随机推荐
- LNMP下安装Pureftpd开启FTP服务以及修改FTP端口的方法
LNMP 环境包 1.2 内置了 Pureftpd 的安装程序. 安装 Pureftpd 进入lnmp解压后的目录,执行:./pureftpd.sh 会显示如下图: 按提示输入当前MySQL的root ...
- Solidity属性和方法的访问权限
属性:默认是internal的类型,外部是不可以访问调用的,如果加上public的话,那么是会自动为这个属性加上一个get的方法的,比如uint public _age; => functi ...
- 用什么方法给PDF添加页眉页脚
我们所看到的书本中都会设置好有页眉页脚,那么电子书想要添加页眉页脚要怎么操作呢,用什么方法可以在PDF中添加页眉页脚呢,今天就为大家分享一下,如何在电子文件中添加页眉页脚,想知道的小伙伴们就一起来看看 ...
- thinkphp3.2 删除缓存文件
//删除后台缓存 public function ajaxcleanCache(){ $dir = "./Application/Runtime/Logs/Admin/"; if( ...
- c++ ignore用法
转自 http://blog.sina.com.cn/s/blog_4b3336c50102v45n.html std::cin.ignore() can be called three diffe ...
- 设计模式学习之责任链模式(Chain of Responsibility,行为型模式)(22)
参考:http://www.cnblogs.com/zhili/p/ChainOfResponsibity.html 一.引言 在现实生活中,有很多请求并不是一个人说了就算的,例如面试时的工资,低于1 ...
- requests之headers 'Content-Type': 'text/html'误判encoding为'ISO-8859-1'导致中文text解码错误
0. requests不设置UA 访问baidu 得到 r.headers['Content-Type'] 是text/html 使用chrome UA: Content-Type:text/htm ...
- sklearn交叉验证3-【老鱼学sklearn】
在上一个博文中,我们用learning_curve函数来确定应该拥有多少的训练集能够达到效果,就像一个人进行学习时需要做多少题目就能拥有较好的考试成绩了. 本次我们来看下如何调整学习中的参数,类似一个 ...
- python输入
(程序是如何输入输出的) 先了解一个概念,什么是函数? 简单来说,函数就是封装了一些功能,到时候只需要写一个函数名字,就可以使用这些功能 input函数,它是输入函数,它可以将用户输入的内容当做“字符 ...
- flask微电影系统开发中上下文处理器
在做日志模块开发的过程中,我们遇到了一个问题,就是日期的问题,我们这个时间就要用到上下文处理器来解决问题,他的作用就是可以在我们固定模块中进行传递,我们的模块如下 @admin.context_pro ...