Negotiable text generator

Question

I am creating a rotating text generator. The generator combines sentences (text) from a number of arrays, "loops" through them visually and adds them. I thought it was best to create a script with the base version of the generator , since I just created it:

Explanation

The main operations are as follows:

• Sentences are defined in separate arrays ( Array1 , Array2 and Array3 in the script)
• A second set of arrays is defined containing arrays that can be combined ( combo0 and combo1 in the fiddle)
• When you click the Create button, the Generate function is called, which visually loops the sentences from the array of sentences ( combo0[0] in the script)
• This function executes the loop until the sentence is cyclically 8 times ( var times = 8 in the fiddle)
• When this is done, the function calls the callback function that was provided. In this callback, it starts Generate again, this time with a second array ( combo0[1] in the fiddle)

The reason for the callback is that I need to “wait” to complete the loop effect, and then move on.

Problem

Although this does exactly what I need (and besides the fact that I very much doubt that this is the way to do it, I always feel a little strange when writing a function that loops), I have the following problem

In combo arrays, I determine which of the 'sentence' arrays may be possible combinations. This works fine if there are two combinations , but with more than two, I have a problem:

 Generate(combo0[0], i, function(i) { //generate from first array element of combo0, callback to generating from second array of combo0 Generate(combo0[1], i, function(i) { $('div#status').html('Done!'); //show status $('input#generate').removeAttr("disabled"); //enable button }); }) 

I would have to rewrite this recursively to take into account the possibility of a combo array consisting of 3 or even 4 options. This will probably break the script if the combo array contains only 2 (or 1) arrays.

This is where I am stuck. The main problem is that if I loop over the combo array, for example with .each (); the Generate function is called several times synchronously, so the whole effect of the looping is lost.

I tried to write various loops that take into account the length of the array of the given combo array, but today I have broken more browsers than ever before and I can’t figure out what to do.

Answer 1

I managed to fix it. Some time far from the screen is good.

What I did was add a counter 'n', which increases if a multiple of the times variable is achieved, as a result of which the function will continue to iterate but output (see the line from the third to the last) from the next array ( lists[n] ). Finally, checking how many remaining arrays will be determined if we finish. If everything is done, write the sentence for the last time, run the optional callback and return false. Thus, the function will accept the entire array, not just the subarray ( combo , not combo[0] ):

 //Generate from array 'lists', simulating a 'slot machine function Generate(lists, n, i, callbackFnk) { if (!(i >= 0)) { i= 0; } setTimeout((function(msg){ i++; return function(){ if (i % times != 0){ //We haven't reached a multiple of the times variable yet, keep going. Generate(lists, n, i, callbackFnk); } else if (i % times === 0 && i != 0 && n < (lists.length-1)) { //Multiple reached, increase n n++; Generate(lists, n, i, callbackFnk); } else if (n == (lists.length-1)) { //we are done as there are no more arrays to go over showMessage(msg, i); if (callbackFnk) callbackFnk.call(this, i); return false; } showMessage(msg, i); } })( //output using the given n value lists[n][Math.floor(Math.random() * lists[n].length)] ), speed); } 

See a working fiddle here: http://jsfiddle.net/c_kick/kuNrA/1/

I hope this helps others!

Answer 2

This should do the trick:

 var Array1 = new Array("Sentence 1 - A ", "Sentence 1 - B ", "Sentence 1 - C ", "Sentence 1 - D ", "Sentence 1 - E ", "Sentence 1 - F ", "Sentence 1 - G "); var Array2 = new Array("Sentence 2 - A", "Sentence 2 - B", "Sentence 2 - C", "Sentence 2 - D", "Sentence 2 - E", "Sentence 2 - F", "Sentence 2 - G"); var Array3 = new Array("Sentence 3 - A", "Sentence 3 - B", "Sentence 3 - C", "Sentence 3 - D", "Sentence 3 - E", "Sentence 3 - F", "Sentence 3 - G"); //define acceptable combinations of arrays var combo0 = new Array(Array1, Array2); var combo1 = new Array(Array1, Array2, Array3); //define global vars var speed = 140; var content = ''; //write sentence to box. If counter is a multiple of the 'times' var: append instead of write function showMessage(list, i, e) { $('div#generated').html(content + list[i]); if ((i + 1) % (e + 1) == 0) content += list[i]; } //Generate from array 'list', simulating a 'slot machine function Generate(lists, end, l, i, e) { if (l == undefined) l = 0; if (i == undefined) i = 0; if (e == undefined) e = Math.floor(Math.random() * lists[l].length); setTimeout(function() { showMessage(lists[l], i, e); if ((i + 1) % (e + 1) != 0) Generate(lists, end, l, i+1, e); else if (lists.length - 1 > l) Generate(lists, end, l + 1); else end(); }, speed); } $(document).ready(function() { $('input#generate').click(function() { $(this).attr("disabled", true); //disable button content = ''; //reset content $('div#status').html('Running..'); //show status Generate(combo0, function() { $('div#status').html('Done!'); //show status $('input#generate').removeAttr("disabled"); //enable button}); }); }); });