Interval wird nur einmal ausgeführt?

Bleistift

Hey,

ganz simple Geschichte eigentlich ..
Aber mal wieder ein Problem wo meine Gedanken zur Fehlerbehebung nicht genügen.

Das Problem:
Ich setze nach Klick auf einen Link einen Interval mit der Funktion "animation" welche alle 10 bzw 7 Millisekunden ausgeführt werden soll.
Jedoch wird die Funktion nur einmalig ausgeführt und dann erst wieder beim erneuten Klick auf den Link..

Erklären kann ich mir das nicht und ich habe jetzt auch schon fast ne Stunde gegoolet aber absolut nichts gefunden.

Ich habe auch an 2 verschiedenen Stellen etwas ausgeben lassen.
Einmal am Anfang der Funktion die Variable sizeCount (gibt das Ergebnis zurück was ich auch haben will und mir zeigt, dass der Interval auch eigentlich nicht beendet werden dürfte..)
Und einmal sobald der Interval beendet werden müsste (wenn die richtige Höhe des Elements erreicht ist)

Hier dazu mal der entsprechende Programmcode:

Code

var sizeCount = 15;var TimespanInt;
var counter;




function login() {
    counter = 210;
    document.getElementById('options').style.border = "2px solid #fff";
    TimespanInt = setInterval(animation(counter), 10);
}




function register() {
    counter = 238;
    document.getElementById('options').style.border = "2px solid #fff";
    TimespanInt = setInterval('' + animation(counter2) + '', 7);
}




function animation() {
    alert(sizeCount);
    if (counter < sizeCount) {
        clearInterval(TimespanInt);
        alert('true');
    }
    else {
        document.getElementById('options').style.height = sizeCount + "px";
        sizeCount = sizeCount+3;
    }
}

Alles anzeigen

Habe auch schon probiert counter als Parameter zu übergeben, jedoch läufts dann seltsamer Weise gar nicht mehr
Dachte mir vielleicht wird die Seite nur falsch geladen oder irgendwas ..
Habe verschiedene Browser (FF, Opera, Chrome) ausprobiert und auch mal mit F5 mal mit STRG+F5 neugeladen um den Cache des Browser für die Seite nicht zu nutzen
aber nichts davon funzt

Gern könnt ihr euch auch selber ein Bild von dem Problem machen: http://public-enterprise.de/mypage.php#
Vielleicht funzt es bei euch ja sogar XD

Hoffe mir kann hier jemand helfen.

Allen einen schönen 2. Adventssonntag.
Tim

synaptic

probiers mal so:

HTML

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Ninja at his best :o)</title>
  <script type='text/javascript'>
var state;
var sizeCount = 15;
var TimespanInt;
var counter;


function login() {
    counter = 210;
    document.getElementById('options').style.border = "2px solid #fff";
    TimespanInt = setInterval('animation('+counter+')', 10);
}


function register() {
    counter = 238;
    document.getElementById('options').style.border = "2px solid #fff";
    TimespanInt = setInterval('animation('+counter+')', 7);
}


function animation() {
    if (counter < sizeCount) {
        clearInterval(TimespanInt);
        alert('true');
    }
    else {
        document.getElementById('options').style.height = sizeCount + "px";
        sizeCount = sizeCount+3;
    }
}
  </script>
  <style type='text/css'>
html, body {
    background-color: #000;
    color: #fff;
    font: 12px arial;
}


#main-container {
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    width: 1150px;
}


#menue {
    margin-left: 0;
    margin-top: 2%;
    opacity: 0.87;
    width: 590px;
    padding: 5px;
    height: 30px;
    color: #fff;
    float: left;
}
a.link { color: inherit; font: inherit; text-decoration: inherit; }
table.headStructure { 
    width: 96%; 
    height: 100%; 
    border: 1px solid Grey; 
    text-align: center;
    text-decoration: none;  
}
td.menue { width: 109px; font: 11px verdana; }
td.menue:hover { background-color: #fff; color: Grey; text-decoration: underline; }


#options {
    margin-top: 2%;
    border: 2px double Grey;
    width: 439px;
    padding: 8px;
    height: 14px;
    margin-right: 0;
    float: right;
}
p.login, p.register { width: 200px; height: 20px; font: 12px arial; color: Grey; text-align: center; margin-top: -1px }
p.login {float: left; margin-left: 0;text-decoration: none; }
p.register { float:right; margin-right: 0; text-decoration: underline; }


p.loginContent, p.registerContent { margin-top: -5000px; height: 200px; width: 90%; margin-left: auto; margin-right: auto; }


  </style>
</head>
<body>
  <div id="main-container">
    <div id="menue">
        <table class="headStructure" cellspacing="11">
            <tr>
                <td class="menue"><a href="" class="link">Home</a></td>
                <td class="menue"><a href="" class="link">Music</a></td>
                <td class="menue"><a href="" class="link">User</a></td>
                <td class="menue"><a href="" class="link">Guestbook</a></td>
                <td class="menue"><a href="" class="link">Info</a></td>
            </tr>
        </table>
    </div>
    <div id="options">
        <p class="login"><a href="#" class="link" onclick="login(); return false;">Login</a></p>
        <p class="register"><a href="#" class="link" onclick="register(); return false;">Register</a></p>
        <p class="loginContent">sdkfjnhdskffidfininfndoifndosifdsfoijsdf<br>dlfjosdjfdfo<br><br><br>lasjljd</p>
        <p class="registerContent">sdk453253566565456546sifdsfoijsdf<br>dlfjosdjfdfo<br><br><br>lasjljd<br><br>34980042</p>
    </div>
    </div>


  
</body>




</html>

Alles anzeigen

Bleistift

Danke funzt.

Das return und das "'animation('+counter+')', 10" hat schon gereicht

Danke, Danke.
Wieso funzt es bei einer anderen Seite auch ohne return und ('function('+var+')' ?

lg

synaptic

das return false ist dafür da, dass der link nicht ausgeführt wird, sonst haste ja ne art pagereload, is ganz seltsam mit den hashmarks, aber so macht mans

Bleistift

Ok dank dir nochmal.
Seltsame Sache

Aber auch wieder interessant. Wird schon seinen Sinn haben und vill. braucht mans ja manchmal zwinged

Wünsche dir nochn schönen Adventsabend

Aber eine Sache stört mich noch.
Wenn ich jetzt einen Absatz den auf -5000px margintop gesetzt habe, damit er erstmal nicht angezeigt wird nach Beenden des Intervals auf +10px margintop setzen möchte, macht er das nicht.
Wollte das ganze mit einer switch erledigen ..

Ok mit ner Id statt ner Klasse funzt es xd

Interval wird nur einmal ausgeführt?

Tags

Benutzer online in diesem Thema