迭代通过阵列3项

我有以下阵列：迭代通过阵列3项

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行文本。

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

来源

2012-11-04 fuzz

你能给我们演示吗？ –

我不清楚。如果有12行，该怎么办？该程序然后做什么 – polin

“迭代通过接下来的3行”...什么时候？立即？ 'X'发生后？更多的信息会有帮助... –

如果我理解正确的话你可以做的是备份你的阵列和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

来源

2012-11-04 06:55:32 elclanrs

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

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)

来源

2012-11-04 06:31:38 manishie

我解释了我在问题中的推理。这是一个聊天对话，只能容纳3行。所以我需要前进到阵列中的下三行。 – fuzz

好的。我只是不太确定，如果我理解你的最终目标。这段代码会有帮助，还是我误解了一些东西？ – manishie

'while（true）'会冻结浏览器 – codingbiz

我想你需要一个通用的方法，也许这fiddle应该有所帮助。
这里的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/>'); 
}

来源

2012-11-04 06:40:09 Srinivas

我可以试一试，只要您能告诉我方法的签名和当前状态（输入）的所需输出。但是，扩展我写的代码应该不是什么大问题。 – Srinivas

如果我想象你的聊天气泡正确这样的事情可能会为你工作：

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

来源

2012-11-04 07:04:14

这不是一个干净的解决方案，但工程：JS Fiddle here

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++;  
}

来源

2012-11-04 07:13:53 codingbiz

迭代通过阵列3项

回答

相关问题