8

我正在构建一个旋转文本生成器。生成器组合来自多个数组的句子（文本），在视觉上“循环”它们并附加它们。我认为最好使用生成器的基本版本创建一个小提琴，因为我现在已经构建了它：

解释

基本工作如下：

  1. 句子在单独的数组中定义（Array1,Array2和Array3小提琴）
  2. 定义了第二组数组，包含可以组合的数组（combo0在combo1小提琴中）
  3. 按下“生成”按钮时，Generate调用该函数，该函数在视觉上从一组句子中循环句子（combo0[0]在小提琴中）
  4. 这个函数循环自己直到句子循环了 8 次（var times = 8在小提琴中）
  5. 完成后，该函数调用提供的回调函数。在这个回调中，它Generate再次运行，这次使用第二个数组（combo0[1]在小提琴中）

回调的原因是我需要“等待”循环效果完成，然后继续。

问题

虽然这正是我所需要的（而且我非常怀疑这是否是这样做的方法；我在编写一个自身循环的函数时总是觉得有点奇怪），但我有以下问题：

在combo数组中，我定义了哪些“句子”数组可以是可能的组合。如果有两种组合，这很好用，但如果有两种以上，我有一个问题：

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

我将不得不递归地重写它以适应combo由 3 个甚至 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

我已经设法修复它。离开屏幕一段时间是件好事。

我所做的是添加一个“n”计数器，如果times达到变量的倍数，该计数器会增加，导致函数继续迭代，但从下一个数组 ( ) 输出（参见倒数第三行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 回答