javascript - 将具有多个函数的 JavaScript 简化为单个函数数组

Question

所以我试图简化我的脚本，从必须使用带有 setintervals 和clearintervals 的多个函数到只有一个可以同时运行的函数，就好像它是一堆不同的函数一样，比如一个数组，所以文件不是很大。以下是脚本功能的示例 http://test.719records.com/test/test.html (页面需以1080P以上观看) 这是整个脚本 http://test.719records.com/test/jquery.solari.letters.js

这是我希望最终迭代的脚本的摘录。

//randomize name1 li:1 frames
//until correct character is landed on
var randlet = 0;

function randomizerlet1_1() {
    randlet = Math.floor(Math.random() * 156);
    timesletrun[0] += 1;
    if (masterlet[randlet] == letter[0]) {
        $('#flipL1_1').css('background-position', masterlet[randlet]);
        clearInterval(intervallet1_1);
    } else {
        if (timesletrun[0] == 300) {
            masterlet[randlet] = letter[0];
            $('#flipL1_1').css('background-position', masterlet[randlet]);
            clearInterval(intervallet1_1);
        } else {
            $('#flipL1_1').css('background-position', masterlet[randlet]);
        }
    }
}

var intervallet1_1 = setInterval(function() {
    randomizerlet1_1();
}, 10);

这是序列中的第二个字母:

//randomize name1 li:2 frames
//until correct character is landed on
function randomizerlet1_2() {
    randlet = Math.floor(Math.random() * 156);
    timesletrun[1] += 1;
    if (masterlet[randlet] == letter[1]) {
        $('#flipL1_2').css('background-position', masterlet[randlet]);
        clearInterval(intervallet1_2);
    } else {
        if (timesletrun[1] == 300) {
            masterlet[randlet] = letter[1];
            $('#flipL1_2').css('background-position', masterlet[randlet]);
            clearInterval(intervallet1_2);
        } else {
            $('#flipL1_2').css('background-position', masterlet[randlet]);
        }
    }
}

var intervallet1_2 = setInterval(function() {
    randomizerlet1_2();
}, 10);

现在 1 条线路总共运行 38 条线路，最终将达到 28 条线路。很抱歉，我的知识不是专家水平，我仍在学习，所以这可能很容易，也可能不容易，但如果可能的话，我需要将它们简化为一个迭代函数。也许使用多维数组和函数参数？我不确定这段代码会是什么样子。

如果这可以简化，我将为它创建一个教程并将其包装到一个免费的第 3 方插件中，供人们在自己的个人项目中使用!

Answer 1

这是一个开始 - 正在进行中

FIDDLE

$(function() {
  var products= new Array(4);
  var letters = new Array(39);
  var numbers = new Array(4);
  $.each(products,function(i) {
    var aDIV = $("<div/>",{"class":"product"});
    var aUL  = $("<ul/>",{"class":"cd"});
    var logoLI = $("<li/>",{"class":"logo","id":"logo"+(i+1)});
    aUL.append(logoLI);
    var aLI;
    $.each(letters,function(j){
      aLI=$("<li/>",{"class":"flipletters","id":"flipL"+i+"_"+j,}).css("background-position", "0px 0px").appendTo(aUL);
    });
    $.each(numbers,function(j){
      aLI=$("<li/>",{"class":"flipdigits","id":"flip"+i+"_"+j,}).css("background-position", "0px 0px").appendTo(aUL);
    });
    $(".wrapper").append("<br style='clear:both'/>").append(aDIV.append(aUL));
  });
});
var masterlet = []
var cnt = 0;
$.each(",A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z".split(","),function(n, let) {
    for (var i=0;i<6;i++) {
        masterlet.push("0px -"+(60*cnt++)+"px");
    }                
});
masterlet.push("0px -"+(60*cnt++)+"px");
masterlet.push("0px -"+(60*cnt++)+"px");




function randomizerlet(letId,letPos) {
    if (letPos) {
        this.letPos = letPos;
        this.timesletrun=0;
        this.letId = letId;
        this.tId=setInterval(function() {
          randomizerlet(letId);
        }, 10);
    }
    var randlet = masterlet[Math.floor(Math.random() * masterlet.length)];
    this.timesletrun++;
    var thisLI = $('#'+letId); 
    if (masterlet[randlet] == this.letPos) {
        thisLI.css('background-position', randlet);
        clearInterval(this.tId);
    } else {
        if (this.timesletrun == 300) {
            thisLI.css('background-position', this.letPos);
            clearInterval(this.tId);
        } else {
            thisLI.css('background-position', randlet);
        }
    }
}