迭代数组中的3个项目

Question

我有以下数组：

var text = [
    "RISE AND SHINE, JONATHON! HMM, ", 
    "THAT'S A MOUTHFUL, HOW ABOUT ", 
    "I JUST CALL YOU JOHN? MY ", 
    "NAME IS PROFESSOR ", 
    "PHIL. I BUILT YOU FROM ", 
    "SCRATCH. I WANT TO TELL YOU ",
    "A LITTLE STORY BEFORE WE START."
];

然后我遍历数组：

for (var i = 0; i < 3; i++) {
    this.font.draw(text[i]);
}

这明显输出：

RISE AND SHINE, JONATHON! HMM,
THAT'S A MOUTHFUL, HOW ABOUT 
I JUST CALL YOU JOHN? MY

我需要帮助的是创建一个函数，它将迭代接下来的3行然后显示：

NAME IS PROFESSOR
PHIL. I BUILT YOU FROM
SCRATCH. I WANT TO TELL YOU

......等等。

这是我为JavaScript / HTML5游戏编写的聊天气泡代码，我的聊天对话在任何给定时间只能容纳3行文本。

一旦对话达到最后一句话。 我希望它从一开始就能继续下去。

Answer 1

我认为你需要一个通用的方法，可能这个小提琴应该有所帮助。
这是JS方法。

var text = [
    "RISE AND SHINE, JONATHON! HMM, ",
    "THAT'S A MOUTHFUL, HOW ABOUT ",
    "I JUST CALL YOU JOHN? MY ",
    "NAME IS PROFESSOR ",
    "PHIL. I BUILT YOU FROM ",
    "SCRATCH. I WANT TO TELL YOU ",
    "A LITTLE STORY BEFORE WE START."
];
var len=3;
for(var i=0;i<text.length;i+=len)
{
  for(var j=0;j<len && (i+j)<text.length;j++)
  {
      $('#text').html($('#text').html()+text[i+j]+'<br/>');
  }
  $('#text').html($('#text').html()+'<br/><br/>');
}

Answer 2

如果我正确理解你可以做的是备份你的阵列并splice它直到读完所有行。 换一种说法：

var textOut = text,
    len = text.length / 3,
    i = 0;
for ( ; i < len; i++ ) {
  setTimeout(function() {
    console.log( textOut.splice(0, 3).join(' ') );
  }, i*1000 );
}

以上将每秒记录3行，直到读取所有行。
顺便说一句，你不需要的空间在每个字符串的结尾，因为你可以使用join有空格。

演示： http ： //jsbin.com/atenib/9/edit

Answer 3

我不太清楚这是什么意思，但你可以创建一个简单的函数：

function display_text(start, end) {
    for (var i = start; i < end; i++) {
        this.font.draw(text[i]);
    }
}

然后你会称它为3次：

display_text(0, 2)
display_text(3, 5)
display_text(6, 6)

Answer 4

如果我正确想象你的聊天气泡，这样的事情对你有用：

    var text = [
    "RISE AND SHINE, JONATHON! HMM, ", 
    "THAT'S A MOUTHFUL, HOW ABOUT ", 
    "I JUST CALL YOU JOHN? MY ", 
    "NAME IS PROFESSOR ", 
    "PHIL. I BUILT YOU FROM ", 
    "SCRATCH. I WANT TO TELL YOU ",
    "A LITTLE STORY BEFORE WE START."
];

var max_lines = 3;

var length = text.length;

num_bubbles = length/max_lines; 
if (!(length%max_lines)){
    num_bubbles = num_bubbles + 1;
}


var print_bubble = function(i,text){
    console.log("***start of text bubble****");
    for(j=i*max_lines; j<length && j<(i+1)*max_lines; ++j){
        console.log(text[j] + '\n');//print text bubble contents
    }
}

for (var i = 0; i <num_bubbles ;++i){
    print_bubble(i, text);
}​

Answer 5

这不是一个干净的解决方案，但有效： JS小提琴在这里

document.getElementById("output").innerHTML= "";
var text = [
    "RISE AND SHINE, JONATHON! HMM, ", 
    "THAT'S A MOUTHFUL, HOW ABOUT ", 
    "I JUST CALL YOU JOHN? MY ", 
    "NAME IS PROFESSOR ", 
    "PHIL. I BUILT YOU FROM ", 
    "SCRATCH. I WANT TO TELL YOU ",
    "A LITTLE STORY BEFORE WE START."
];
var counter = 0;
var s = 0;  //start index
var e = 0;  //end index
var l = text.length;
var out = "";  //just for testing/debugging

while(counter < 15)  //to prevent the browser from freezing/infinite loop
{
  if(e+3 < l)  //take 3 items if we have more than 3 left
      e = e +3;
  else
      e = l;  //else use the remaining

  for (var i = s; i < e; i++) {
    out = (text[i])+"<br>";
      document.getElementById("output").innerHTML+=out;

  }
document.getElementById("output").innerHTML+="<HR>";  //separates after 3 items
s = e;
if(e == l) //reset: start from zero
{
    s = 0;
    e = 0;
}

  counter++;    
}
​