Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite
2

So I'm trying to simplify my script from having to use multiple functions with setintervals and clearintervals to have only one function that can be run simultaneously as if it were a bunch of different functions, like an array so the file is not so big. Here is an example of what the script does http://test.719records.com/test/test.html (Page is made to be viewed in 1080P or higher) and here is the script as a whole http://test.719records.com/test/jquery.solari.letters.js

Here is an excerpt of the script that I want to end up being iterated.

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

and here would be the second letter in the sequence:

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

now there are 38 of these running in total for 1 line and there will end up being 28 lines. I'm sorry my knowledge is not at expert level, I'm still learning, so this might be easy and it might not be but I need to simplify these to one iterated function if its possible. Maybe using a multidimensional array and function arguments? I'm unsure how this code would look.

If this can be simplified I will be creating a tutorial for it and wrapping it into a free 3rd party plugin for people to use on their own personal projects!

share|improve this question
Jag vet, kul. lol – Keleko Apr 1 at 5:52
Jättekul .... har vi blivit svenska ? – adeneo Apr 1 at 5:56
SEN NÄR!? BERÄTTA FÖR MIG! – limelights Apr 1 at 5:58
This needs an OO approach. It is highly doable and should even create the page itself using a simple parameter of how many objects you want on the page. I wish I were better at OO since I would likely just code it with arrays for each thing that ends with x_y – mplungjan Apr 1 at 5:59
1  
Here is the masterlet simplified jsfiddle.net/mplungjan/bAD4Y – mplungjan Apr 1 at 6:35
show 14 more comments

1 Answer

up vote 2 down vote

Here is a start - work in progress

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);
        }
    }
}
share|improve this answer
that does get rid of one line, not quite what I'm looking for though. I'd like to get rid of having to using 38 different functions just for one line let alone all 28 lines. 38x28= 1064 functions happening at the same time with setintervals = an unhappy browser :( – Keleko Apr 1 at 7:35
work in progress. See update - not tested yet. – mplungjan Apr 1 at 7:41
ok, setting up a folder to test this. – Keleko Apr 1 at 7:44
I'm doing a bit at a time. It is Easter and I have a family ;) – mplungjan Apr 1 at 7:48
1  
My html does work :) – mplungjan Apr 1 at 8:46
show 16 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.