迭代通過陣列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項

回答

相關問題