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

现在共有38个这样的线路共运行1条线路，最终将有28条线路。对不起，我的知识不是专家级的，我还在学习，所以这可能很简单，也可能不是，但我需要将这些简化为一个迭代函数，如果可能的话。也许使用多维数组和函数参数？我不确定这段代码的外观。

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

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

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

1 个答案: