8

私は回転式テキストジェネレーターを構築中です。ジェネレーターは、多数の配列からの文（テキスト）を結合し、それらを視覚的に「循環」させて追加します。私は今それを構築したので、ジェネレータの基本バージョンでフィドルを作成するのが最善だと思いました：

説明

基本的な仕組みは次のとおりです。

  1. 文は別々の配列（Array1、Array2およびArray3フィドル）で定義されます
  2. 配列の2番目のセットが定義され、組み合わせることができる配列が含まれています（combo0そしてcombo1フィドルで）
  3. 「生成」ボタンを押すと、関数Generateが呼び出され、文の配列から文を視覚的に循環させます（combo0[0]フィドル内）
  4. この関数は、文が8回循環するまで（var times = 8フィドルで）ループします。
  5. これが行われると、関数は提供されたコールバック関数を呼び出します。このコールバックではGenerate、今度は2番目の配列（combo0[1]フィドル内）で再度実行されます

コールバックの理由は、サイクリング効果が完了するのを「待つ」必要があり、次に進む必要があるためです。

問題

これは私が必要としていることを正確に実行しますが（そして、これがそれを行う方法であるかどうか非常に疑わしいという事実に加えて、それ自体をループする関数を書くときはいつも少し奇妙に感じます）、私は次の問題を抱えています：

combo配列では、どの「文」配列を組み合わせることができるかを定義します。これは、 2つの組み合わせがある場合は正常に機能しますが、2つを超えると、問題が発生します。

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

combo3つまたは4つのオプションで構成される配列の可能性に対応するために、これを再帰的に書き直す必要があります。comboまた、配列に2つ（または1つ）の配列しか含まれていない場合、おそらくこれによりスクリプトが破損します。

これは私が立ち往生しているところです。主な問題はcombo、たとえば.each（）;を使用して配列をループすると、generate関数が複数回同期的に呼び出されるため、「サイクリング」効果全体が失われることです。

与えられた配列の配列の長さを考慮に入れてさまざまなループを作成しようとしましたが、combo今日、これまでになく多くのブラウザーがクラッシュし、何をすべきかがわかりません。

4

2 に答える 2

1

これでうまくいくはずです：

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});
        });
    });
});
于 2012-07-27T15:21:14.477 に答える
0

私はなんとかそれを修正することができました。画面から少し離れているのは良いことです。

私が行ったことは、times変数の倍数に達すると増加する「n」カウンターを追加することです。これにより、関数は反復を続行しますが、次の配列（）から出力します（最後から3番目の行を参照lists[n]）。最後に、残りの配列の量を確認することで、完了したかどうかを判断できます。完了したら、最後にもう一度文を書き、オプションのコールバックを実行してfalseを返します。comboこのように、関数は（ではなく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);
}

ここで作業中のフィドルを参照してください：http：//jsfiddle.net/c_kick/kuNrA/1/

これが他の人に役立つことを願っています！

于 2012-07-27T21:15:57.907 に答える