我真的坚持这个javascript问题!
所以我制作了一个完全动画的网页(因此它可以用于在电视中显示)。该动画将由用户配置(存储在数据库中)。
现在,我已经制作了代码来存储配置并获取配置(我执行AJAX调用并将配置保存在json对象数组中),一切都应该如此。< / p>
问题在于我通过数组并使用setTimeout
函数创建动画的动画。为了遍历数组我旋转它
(我根据答案here使用array.push(array.shift())
。)
第一次使用intervalmaster
函数时,一切都按计划进行,但是当再次调用该函数时,我需要再次旋转数组(因为上一个动画)并且数组只是没有&# 39; t rotate!
Bellow我已经留下了一部分我正在使用的代码,它再现了我遇到的问题。我还在数组jsonanima
中添加了一些可能的值(实际上,数组可能更大,值更高)。
我真的不明白发生了什么事情,我也认为这可能是多个setTimeout
功能的问题,因为我已经在某个地方读过(不能&#39;找不到链接,对不起!)实际上并不建议使用多个setTimeout
。
如果是这样的话还有其他办法吗?
提前谢谢!
编辑:感谢mplungjan的评论,我意识到如果将console.log(jsonanimate)
更改为console.log(JSON.stringfy(jsonanima))
,则会输出正确的值( json数组旋转)。这让我更加困惑!为什么我需要JSON.stringfy以正确的顺序获取数组?!
无论如何,现在不能用完整的代码对此进行测试,因为我不在办公室,明天我会给出更多反馈。谢谢mplungjan。
EDIT2:终于解决了我的问题!所以事情是调用函数recursivegroup(recursivegroup(0);
),这个调用是在我旋转数组之前进行的,所以当重新启动动画时,数组仍然会有不正确的值,并且每个子序列值都是错误的。
特别感谢mplungjan和trincot帮助我调试此问题的评论。
Bellow我保留了更正的代码,以便任何有同样问题的人都可以查看。
jsonanima=[{"VD":5,"A":10,"diff":0.25},{"L":7,"IE":8,"diff":0.25}];
function intervalmaster(flag){
function recursivegroup(index)
{
if(index==0)
{
//animateeach(jsonanima,0);
}
setTimeout(function(){
//HERE IT WORKS
jsonanima.push(jsonanima.shift());
console.log(JSON.stringify(jsonanima));
//animateeach(jsonanima,0);
//removed the if statement, since it was irrelevant as mplungjan noted
recursivegroup(index+1);
},(jsonanima[0]['diff'])*60*1000);
}
//Changed this
//recursivegroup(0);
var mastertime=0;
for(var key in jsonanima)
{
mastertime+=(jsonanima[key]['diff']);
}
console.log(mastertime,flag);
console.log(JSON.stringify(jsonanima));
if(flag==true)
{
jsonanima.push(jsonanima.shift());
console.log(JSON.stringify(jsonanima));
}
//changed to here
recursivegroup(0);
masterinterval=setTimeout(function(){intervalmaster(true)},mastertime*60*1000);
}
intervalmaster(false);
&#13;