Avatar billede afse Nybegynder
04. november 2009 - 14:13 Der er 12 kommentarer og
1 løsning

Clear interval via ID med flere elementer

jeg køre en function som skal starte en interval, da der ikke skulle være mulighed for 2 interval med samme element giver jeg dem et id i et array. Altså jeg har en array hvor interval'et bliver tilføjet, hvis den allerede er deri skal den clearinterval og derefter starte den forfra. Problemet er, når jeg gemmer det i array og clearinterval med samme array id clear den alle.
Ved ikke om den clear alle, men når jeg tester med 2 elementer, og trykker hurtig på begge stopper begge når den ene er færdig, selv om den kun er halv færdig med animationen.
[code]
function navn() {
interval[amount] = setInterval(function() {navn1(amount)} , 20);
}

function navn1(amount) {

if(){
} else {
clearInterval(interval[amount]);
}
}

}
[/code]
eksempel

John Sørensen
Avatar billede Slettet bruger
04. november 2009 - 14:29 #1
Hm.. Ser OK ud...
Er du sikker på at du får parameteren amount med rundt (og ikke bare 0 hver gang) ?

Er interval-arrayet erklæret globalt (udenfor funktionerne) ?
Avatar billede intenz Novice
04. november 2009 - 19:37 #2
Det er lidt svært at se ud fra det kode du har givet. Man kan f.eks. ikke se hvordan du får variablen ind i amount. Det eksempel du har lavet vil give 'undefined'.

Det er formegentlig enten amount variablen der ikke er unik, eller som der bliver nævnt er interval variablen ikke defineret globalt.
Avatar billede afse Nybegynder
04. november 2009 - 20:25 #3
koden er bare eksempel, ikke rigtig kode, men køre på samme måde.

Ja, og den gemmer også unique id som setInterval auto later i array'ed til de rigtige nummere, alt er okey for uden clearInterval ikke gider bare virke for 1 ://

John
Avatar billede intenz Novice
04. november 2009 - 20:31 #4
Det er bare utroligt svært at se problemet uden den rigtige kode. Der kan jo sagtens være andre ting end lige set/clear interval der skaber problemet.

Umiddelbart så prøv at smide en alert ind før clearinterval.
alert(amount);
clearInterval(interval[amount]);

Så kan du både se om den bliver kørt med hvert id, og om amount er sat korrekt.
Hvis den bliver kørt med hvert id kan det være din if/else statement der går galt.
Avatar billede afse Nybegynder
04. november 2009 - 21:31 #5
har prøvet alt det der:p
skriver rigtige (unique id) af interval'et ud, med rigtige array ids.
men kan det være pga. jeg køre samme function på 2 forskellige elementer under samme function, kan det ikke lade sig gøre?
har lagt mærke til jquery køre med en array der husker alt man gør, sådan den ikke stopper animation midt i det hele, men venter til 1 er færdig før den starter næste.
For så bliver jeg nød til at lave det på samme måde, selv om jeg ikke kan li det^^


John
Avatar billede Slettet bruger
04. november 2009 - 21:52 #6
Nej det er ikke det, den kan sagtens håndtere mange intervals / timeouts på samme tid...
- Medmindre, selvfølgelig, at navn1-funktionen benytter globale status-variabler som flere instanser kommer op at slås om.

"20" er måske lidt lidt.. Har du prøvet at gi' den mere tid til hvert step ?
Avatar billede afse Nybegynder
04. november 2009 - 21:57 #7
det er ikke noget med tiden at gøre :p
men array'et og element er eneste der køre global og element køre fint, selv om den faktisk bliver lavet om hver gang :o (undre mig lidt)
Amounte sørger for at få rigtige value ud af array'et sådan man kan clearInterval, den køre ikke global, men ind til functionen via første function

John
Avatar billede Slettet bruger
05. november 2009 - 00:26 #8
Hvad mener du med "element" ?
Hvad er indholdet i amount ?

Hvor er koden : )
Avatar billede afse Nybegynder
05. november 2009 - 00:35 #9
amount er tallet til mit array, jeg har lavet en attribution til hver element jeg bruer, hvor array id'et er i, sådan den ved hvad array id hver element har. interval er array, så interval[amounte] er så id'et på interval:)
Glem alt om element, urelevant.

John
Avatar billede Slettet bruger
05. november 2009 - 09:20 #10
Dette viser at det KAN virke (NB: Kun testet Firefox)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Multival</title><style>
.bold {width:30px;height:20px;background-color:#FF0000;text-align:center;font:bold 11pt verdana,sans serif;color:white;}
</style><script>
var hopper = new Array(-1,-1,-1,-1,-1,-1)
function startHop( nr )
    {
    if (hopper[ nr ] == -1)
        {
        hopper[ nr ] = setInterval(function() {hop(nr)} , 20)
        document.getElementById("bold"+nr).style.backgroundColor="#006600"
        }
    }
function hop( nr )
    {
    var bold = document.getElementById("bold"+nr)
    if (bold.getAttribute("retning") == "ned")
        if (bold.offsetTop > 278)
            bold.setAttribute("retning","op")
        else
            bold.style.top = (bold.offsetTop + 1)+"px"
    else
        if (bold.offsetTop < 2)
            bold.setAttribute("retning","ned")
        else
            bold.style.top = (bold.offsetTop - 1)+"px"

    bold.innerHTML = ""+bold.offsetTop

    if (Math.floor(Math.random()*1000) == 1)
        {
        clearInterval( hopper[ nr ] )
        hopper [nr ] = -1
        bold.style.backgroundColor="#FF0000"
        bold.innerHTML = ""+bold.offsetTop
        }
    }
</script></head><body>
<div style="position:absolute;top:0;left:0;width:400px;height:300px;border:2px dashed red;background-color:yellow;">
<div onclick="startHop(0)" retning="ned" class="bold" id="bold0" style="position:absolute;top:150px;left: 50px;">0</div>
<div onclick="startHop(1)" retning="ned" class="bold" id="bold1" style="position:absolute;top:150px;left:100px;">1</div>
<div onclick="startHop(2)" retning="ned" class="bold" id="bold2" style="position:absolute;top:150px;left:150px;">2</div>
<div onclick="startHop(3)" retning="ned" class="bold" id="bold3" style="position:absolute;top:150px;left:200px;">3</div>
<div onclick="startHop(4)" retning="ned" class="bold" id="bold4" style="position:absolute;top:150px;left:250px;">4</div>
<div onclick="startHop(5)" retning="ned" class="bold" id="bold5" style="position:absolute;top:150px;left:300px;">5</div>
</div></body></html>
Avatar billede Slettet bruger
05. november 2009 - 09:54 #11
Bedre (den første dur ikek i Opera)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Multival</title><style>
.bold {width:30px;height:20px;background-color:#FF0000;text-align:center;font:bold 11pt verdana,sans serif;color:white;}
</style><script>
var hopper = new Array(-1,-1,-1,-1,-1,-1)
function startHop( nr )
    {
    if (hopper[ nr ] == -1)
        {
        hopper[ nr ] = setInterval(function() {hop(nr)} , 5)
        document.getElementById("bold"+nr).style.backgroundColor="#006600"
        }
    }
function hop( nr )
    {
    var bold = document.getElementById("bold"+nr)

    if (bold.getAttribute("retning") == "ned")
        if (bold.offsetTop > 278)
            bold.setAttribute("retning","op")
        else
            bold.style.top = (parseInt(bold.style.top) + 1)+"px"
    else
        if (bold.offsetTop < 2)
            bold.setAttribute("retning","ned")
        else
            bold.style.top = (parseInt(bold.style.top) - 1)+"px"

    bold.innerHTML = ""+bold.offsetTop

    if (Math.floor(Math.random()*1000) == 1)
        {
        clearInterval( hopper[ nr ] )
        hopper [nr ] = -1
        bold.style.backgroundColor="#FF0000"
        bold.innerHTML = ""+bold.offsetTop
        }
    }
</script></head><body>
<div style="position:absolute;top:0;left:0;width:400px;height:300px;border:2px dashed red;background-color:yellow;">
<div onclick="startHop(0)" retning="ned" class="bold" id="bold0" style="position:absolute;top:150px;left: 50px;">0</div>
<div onclick="startHop(1)" retning="op" class="bold" id="bold1" style="position:absolute;top:150px;left:100px;">1</div>
<div onclick="startHop(2)" retning="ned" class="bold" id="bold2" style="position:absolute;top:150px;left:150px;">2</div>
<div onclick="startHop(3)" retning="ned" class="bold" id="bold3" style="position:absolute;top:150px;left:200px;">3</div>
<div onclick="startHop(4)" retning="ned" class="bold" id="bold4" style="position:absolute;top:150px;left:250px;">4</div>
<div onclick="startHop(5)" retning="ned" class="bold" id="bold5" style="position:absolute;top:150px;left:300px;">5</div>
</div></body></html>
Avatar billede afse Nybegynder
05. november 2009 - 15:53 #12
jeg kan godt se det virker, kigger lige på det igen, pga. det er bygget op på næsten samme måde :) vender lige tilbage med svar senere, på forhånd tak

John
Avatar billede afse Nybegynder
11. november 2009 - 14:27 #13
det er det jeg skal bruge så jeg siger mange tak, har 2 store projekter, så ikke meget tid til disse ting ^^

John
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester