Question

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

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

我需要页面在不重新加载页面的情况下随机播放

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

我需要这个连续运行。

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

请有人给我一些指导。

提前谢谢。

Answer 1

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

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

Answer 2

这是一个带有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);

Answer 3

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

这是一个fiddle。

Answer 4

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

Answer 5

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

Answer 6

此实现正在等待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);

HERE 是代码。

循环使用JSON的内容而不重新加载页面

6 个答案: