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

Looping over contents of a JSON without reloading the page

本文关键字：循环 情况下 访问 JSON 新加载 加载      更新时间：2023-09-26

我有一个JSON数组(？(，其中包含每个状态的对以及与该状态关联的值，如下所示：

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

我需要页面在不重新加载页面的情况下随机浏览它们

"AL 6" [等待 x 秒] 然后

"AK 3" [等待 x 秒] 然后等等...

我需要它连续运行。

我

从不使用任何这些语言，但被告知它们是我最好的选择。

有人可以给我一些指导吗？

提前谢谢你。

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

http://jsfiddle.net/WD5Qj/1/

var states = '[{"STATE":"AL","AMOUNT":"6"}, {"STATE":"AK","AMOUNT":"3"}]';
json = jQuery.parseJSON(states);

var i = 0;
var cycle = function(){
  $("#state").html(json[i].STATE + json[i].AMOUNT); 
  i = (i+1)%json.length;
}
var loop = setInterval(cycle, 500);

好吧，你需要一个在数组中旋转的函数，以及一个用于保持当前状态的变量(在这个词的两个含义中(：

var stateIndex = 0;
function rotate() {
    stateIndex++;
    if(stateIndex >= states.length)
        stateIndex = 0;
    displayState(states[stateIndex]);
}

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

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 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);

这是一个小提琴。 

function displayNextItem(index){
    if (index === states.length) 
         displayNextItem(0);
    $("#someDiv").text(states[index]["STATE"] + " " + states[index]["AMOUNT"]);
    setTimeout(function() { displayNextItem(index + 1); }, 1000);
}

然后

displayNextItem(0);

var i = 0, l = states.length, timer, intervalLength = 5000;
timer = setInterval(function(){
  if(i >= l){
    clearInterval(timer);
  }else{
    alert(states[i++].STATE);
  }
},intervalLength);

此实现正在等待AMOUNT秒数。如果你想要恒定的秒数，那么其他答案:)更好。

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);

这是代码。

相关文章：