0

そのため、setintervals と clearintervals を使用して複数の関数を使用する必要がないようにスクリプトを単純化して、配列のようにさまざまな関数の束のように同時に実行できる関数を 1 つだけ持つようにして、ファイルがそれほど大きくないようにしています。スクリプトの動作例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);

シーケンスの 2 番目の文字は次のようになります。

//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 個の行になります。申し訳ありませんが、私の知識は専門家レベルではありません。まだ学習中なので、これは簡単かもしれませんし、そうではないかもしれませんが、可能であれば、これらを 1 つの反復関数に単純化する必要があります。たぶん、多次元配列と関数引数を使用していますか? このコードがどのように見えるかはわかりません。

これを単純化できる場合は、そのためのチュートリアルを作成し、それを無料のサードパーティ プラグインにラップして、人々が自分の個人的なプロジェクトで使用できるようにします!

4

1 に答える 1

2

ここから始まります - 進行中の作業

フィドル

$(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);
        }
    }
}
于 2013-04-01T07:23:31.960 に答える