Niet mogelijk in web toestanden. Wordt vaak gebruikt in microcontrollers, maar ook daar vind ik dit niet kunnen, dan nog steeds beter een timer opzetten dan gans de cpu te blokkeren.
Hieronder een paar oplossingen voor de Blink toestand. Studenten zullen de weg wel vinden en in 2de zit een beter resultaat neerzetten.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8"/>
<title>Blinky</title>
<style>
div { display: block; width: 200px; height: 200px; font-size: 50px;
text-align: center; border: 1px solid black; margin: 20px }
</style>
<script>
// dom tree is geladen, we kunnen we onze klik handler aan de button hangen
$(document).ready( start );
// variable moet globaal zijn
var counter;
function start() {
$("button").on("click", function(e) {
// standaard gedrag van de button voorkomen
e.preventDefault();
counter = 0;
blink();
});
}
function blink() {
// rood of blauw <- counter even of oneven
var color = (counter % 2 == 0) ? "red" : "blue";
$("div").css("background-color", color);
// counter verhogen, uiteindelijk moeten we stoppen
counter++;
if (counter < 8) {
// de "blink" functie oproepen binnen 200mS.
setTimeout(blink, 200);
} else {
// terug op wit zetten, niet nodig, maar hier gewoon leuk
$("div").css("background-color", "white");
// aangezien we hier geen setTimeout meer oproepen, stopt alles hier.
}
}
</script>
</head>
<body>
<h1>Blinky</h1>
<div>Yoehoe</div>
<button>Doe nog maar eens</button>
</body>
</html>
Een alternatief script, deze keer met een timer.
// dom tree is geladen, we kunnen we onze klik handler aan de button hangen
$(document).ready( start );
// variabelen moeten globaal zijn
var counter;
var timer;
function start() {
$("button").on("click", function(e) {
// standaard gedrag van de button voorkomen
e.preventDefault();
counter = 0;
// de functie blink wordt om de 200mS opgeroepen
// tot in de eeuwigheid (of tot clearInterval)
timer = setInterval(blink, 200);
});
}
function blink() {
// rood of blauw <- counter even of oneven
var color = (counter % 2 == 0) ? "red" : "blue";
$("div").css("background-color", color);
// counter verhogen, uiteindelijk moeten we stoppen
counter++;
if (counter > 80) {
// stop onze timer
clearInterval(timer);
// terug op wit zetten, niet nodig, maar hier gewoon leuk
$("div").css("background-color", "white");
}
}
