Javascript 在不重新加载页面的情况下循环JSON的内容

我有一个JSON数组（？）由每个状态的对和一个与该状态关联的值组成，如下所示：

var states = [{"STATE":"AL","AMOUNT":"6"}, {"STATE":"AK","AMOUNT":"3"}]

我需要页面在不重新加载页面的情况下在它们之间来回移动

“AL 6”[等待x秒]然后“AK 3”[等待x秒]然后等等

我需要它持续运行

我从未使用过这些语言中的任何一种，但有人告诉我，它们是我最好的选择

有人能给我一些指导吗

---

提前谢谢。

好的，您需要一个通过数组进行旋转的函数和一个保持当前状态的变量（两种含义）：

您需要一个间隔来执行旋转：

var stateRotation = window.setInterval(rotate, 3000); // 3000ms = 3 sec

stateRotation

变量是间隔的标识符。如果想要停止，可以使用它：

window.clearInterval（stateRotation）

现在，上面的代码预期一个函数
displayState
，它接受一个状态对象并显示它。它的外观完全取决于您希望状态的显示方式。最简单的形式如下：

function displayState(state) {
    $('#state-name').html(state.STATE);
    $('#state-amount').html(state.AMOUNT);
}

根据你的描述，它可能更像

$('#state-text').html(state.STATE + ' ' + state.AMOUNT);

好的，您需要一个通过数组进行旋转的函数，以及一个保持当前状态的变量（在单词的两种含义中）：

您需要一个间隔来执行旋转：

var stateRotation = window.setInterval(rotate, 3000); // 3000ms = 3 sec

stateRotation
变量是间隔的标识符。如果想要停止，可以使用它：
window.clearInterval（stateRotation）

现在，上面的代码预期一个函数
displayState
，它接受一个状态对象并显示它。它的外观完全取决于您希望状态的显示方式。最简单的形式如下：

function displayState(state) {
    $('#state-name').html(state.STATE);
    $('#state-amount').html(state.AMOUNT);
}

根据你的描述，它可能更像

$('#state-text').html(state.STATE + ' ' + state.AMOUNT);

然后

displayNextItem(0);

然后

displayNextItem(0);

此实现正在等待
数量
秒数。如果您想要恒定的秒数，那么其他答案更好：）

JavaScript:

var states = [{"STATE":"AL","AMOUNT":"6"}, {"STATE":"AK","AMOUNT":"3"}];

function iterate(index) {
  var time = states[index].AMOUNT;

  // replace the text with new one
  $("#output").text(states[index].STATE + " " + time);

  setTimeout(function() {
    var next = (index + 1) % states.length;
    iterate(next);
  }, time * 1000);
}

iterate(0);

是代码。
此实现正在等待
量
秒数。如果您想要恒定的秒数，那么其他答案更好：）

var states = [{"STATE":"AL","AMOUNT":"6"}, {"STATE":"AK","AMOUNT":"3"}]; 
var i = 0; 
setInterval(function(){ 
  var array_index = i % states.length; 
  $('#state').html( states[ array_index ]['STATE'] );
  $('#state').html( states[ array_index ]['AMOUNT'] );
  i++; 
}, 2000); 

JavaScript:

var states = [{"STATE":"AL","AMOUNT":"6"}, {"STATE":"AK","AMOUNT":"3"}];

function iterate(index) {
  var time = states[index].AMOUNT;

  // replace the text with new one
  $("#output").text(states[index].STATE + " " + time);

  setTimeout(function() {
    var next = (index + 1) % states.length;
    iterate(next);
  }, time * 1000);
}

iterate(0);

是代码

var states = [{"STATE":"AL","AMOUNT":"6"}, {"STATE":"AK","AMOUNT":"3"}]; 
var i = 0; 
setInterval(function(){ 
  var array_index = i % states.length; 
  $('#state').html( states[ array_index ]['STATE'] );
  $('#state').html( states[ array_index ]['AMOUNT'] );
  i++; 
}, 2000); 

这是一个例子

这是一个例子
 下面是一个JSFIDLE，其中setInterval执行一个函数，该函数在每个状态之间交替，并在div中显示：


下面是一个带有setInterval的JSFIDLE，它执行一个在每个状态之间交替的函数，并将其显示在div中：


您想每x秒显示一对吗？如果该数组只是在页面上创建的，而不是通过AJAX或其他方式检索的，那么它只是一个javascript数组。不涉及JSON。它始终是一个JavaScript数组。JSON只是一种将数组表示为文本来传输它的方法。从技术上讲，Javascript数组是JSON。不，它不是。JavaScript数组是内存中的真实数组，而JSON只是表示数组的字符串。是否希望每x秒显示一个数组对？如果该数组只是在页面上创建的，而不是通过AJAX或其他方式检索的，则它只是一个JavaScript数组。不涉及JSON。它始终是一个JavaScript数组。JSON只是一种将数组表示为文本来传输它的方法。从技术上讲，Javascript数组是JSON。不，它不是。JavaScript数组是内存中的真实数组，而JSON只是表示数组的字符串，OP希望它不断重复。@Terry:Adam正在displayNextItem中设置超时，在这种情况下，超时会更有意义。@Terry-当它到达数组末尾时，它从零开始，但赛特维特可能是cleaner@TerryR：递归的
setTimeout
充当一个间隔。刷新中的Wow 3@注释！哈哈。很抱歉，我甚至没有注意到递归，这就是我评论咖啡前所得到的。我想你的意思是
setInterval（）
，OP希望它不断重复。@Terry:Adam正在displayNextItem中设置超时，在这种情况下，超时会更有意义。@Terry-当它到达数组末尾时，它从零开始，但赛特维特可能是cleaner@TerryR：递归的
setTimeout
充当一个间隔。刷新中的Wow 3@注释！lol。对不起，我甚至没有注意到递归，这就是我评论咖啡前得到的。如果你需要在使用所有项目时重新开始，用I=0替换clearInterval（计时器）；如果在使用所有项目时需要重新开始，请将clearInterval（计时器）替换为i=0；在答案中包含代码（或代码的重要部分）是个好主意。1） 链接可能会停止工作2）用户不必访问jsfiddle.net来查看代码。最好在答案中包含代码（或其中的重要部分）。1） 链接可以停止工作2）用户不必访问jsfiddle.net来查看代码。