Met Javascript een punt toevoegen elke seconde?
Ik probeer met JavaScript een functie te maken om gedurende 10 seconden, elke seconde een punt in een span te zetten. Maar ik heb geen idee hoe ik zoiets met doen.
Ik weet dat ik moet werken met een setInterval(1000), maar ik heb gewoon geen idee hoe ik het kan toepassen. :/
Enige wat ik nu nog heb is:
Code (php)
1
2
2
var dots = document.getElementById('dots');
dots.innerHTML = '.';
dots.innerHTML = '.';
Kan iemand mij een zetje in de goede richting geven? Ben nogal een JavaScript noobje. :P
Mvg, Richard.
Code (php)
1
2
3
4
2
3
4
var dots = document.getElementById('dots');
setInterval(function(){
dots.innerHTML += '.';
}, 1000);
setInterval(function(){
dots.innerHTML += '.';
}, 1000);
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
var dots = document.getElementById('dots');
(function() {
dots.innerHTML += '.';
setTimeout(arguments.callee, 1000);
})();
(function() {
dots.innerHTML += '.';
setTimeout(arguments.callee, 1000);
})();
Waarom is dit dan beter?
Bij zoiets kleins maakt het niet uit maar als je grote functies (bijv. ophalen met AJAX) in een setInterval stopt dan kan het zo zijn dat hij al weer de volgende gaat draaien terwijl de vorige actie nog niet voorbij is. Als dit zo door blijft gaan krijg je een grote ophoping.
De code van mij wacht eerst totdat de functie is uitgevoerd en zet daarna nog een setTimeout van 1s. Hiermee loop je op ten duur misschien iets achter, maar je krijgt geen ophoping van niet afgemaakte functies.
Toevoeging op 07/09/2011 17:04:23:
Bedankt Wouter, dat werkte.
Wat betekent 'arguments.callee'?
Toevoeging op 07/09/2011 17:12:41:
Okee, de punten werken, maar ik wil dat als er meer dan 10 punten zijn, dat er wordt geredirect.
Code (php)
1
2
3
2
3
if(dots.length >= 10) {
window.location = 'step2.php';
}
window.location = 'step2.php';
}
Ik probeerde dit, maar dat werkt niet. :/
Gewijzigd op 07/09/2011 17:02:24 door Richard Augspurger
Richard Augspurger op 07/09/2011 17:01:23:
Wat betekent 'arguments.callee'?
Arguments slaat terug op de variabelen die in de functie staan. Dus bijv. mijnFunc('tekst', 21); hierbij slaat arguments terug op 'tekst' en 21.
Met de propertie callee zeg je dat we deze argumenten nog een keer gaan aanroepen. Je krijgt dus dat de functie waarin dit staat nog een keer wordt aangeroepen.
En om na 10 dots te redirecten zul je een count var bij moeten houden:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
var dots = document.getElementById('dots'),
countDots = 1;
(function() {
dots.innerHTML += '.';
if( countDots++ == 10 ) {
window.location = 'index_redirect.html';
}
else {
setTimeout(arguments.callee, 1000);
}
})();
countDots = 1;
(function() {
dots.innerHTML += '.';
if( countDots++ == 10 ) {
window.location = 'index_redirect.html';
}
else {
setTimeout(arguments.callee, 1000);
}
})();
Gewijzigd op 07/09/2011 23:47:32 door Wouter J