Voortgangsindicator VII: Snake in een formulierveld

JavaScript is niet bedoeld om grote, ingewikkelde berekeningen uit te voeren. Als je het toch probeert zul je vaak lang moeten wachten op het resultaat. Ook kan je PC erg traag worden.
In dergelijke gevallen is het handig als je op het scherm kunt zien dat er voortgang wordt geboekt bij de berekeningen en dat de PC of de browser -dus- niet hangt of zo. Het voorkomt ook dat de browser een melding geeft dat een script niet reageert omdat er geen interactie met het scherm is.

Voorbeeld:
Op deze website, in de rubriek "Rekenen", vind je een beschrijving van een priemgetallen zeef. Die is redelijk snel, zolang je er niet te veel van vraagt. Maar als je bijvoorbeeld 5000 priemgetallen wilt laten berekenen, is je PC even bezig...
Voor de rekenaars onder ons: het 5000e priemgetal is 48 611.

Voor langdurige processen waarvan niet te bepalen is hoe lang het gaat duren is een snake heel geschikt. Een snake is een rijtje karakters of figuurtjes dat in een horizontale balk beweegt. De beweging geeft aan dat het proces vordert.
Een goed voorbeeld van een toepassing is de balk met de bewegende blokjes die je vroeger had in het startscherm van Windows XP en Vista.

Op deze bladzijde wordt een snake voorgesteld die werkt in een formulier-veld. Elders op deze site, in de rubriek Rekenen, vind je uitvoeringen die in de tekst of in een popup verschijnen.

Als je op de knop Start Voorbeeld klikt wordt er een script gestart dat een lange berekening simuleert.
Er verschijnt een formulier-veld waarin wordt getoond dat de simulatie actief is. Dit is de snake. Als de berekening klaar is stopt de beweging.
Als je vervolgens op Stop Voorbeeld klikt, stopt de simulatie. Na een klik op Einde verdwijnt de snake.

De code van de snake kun je downloaden om zelf te gebruiken.

Opmerking:
 
Hoewel deze code op zich vrij eenvoudig is, raad ik het beginnende programmeurs af om dit te gebruiken. De toepassing er van is namelijk vrij lastig. Feitelijk is het pure overhead; de voortgang van het rekenproces wordt steeds even onderbroken om het scherm bij te werken. Je moet daarom heel goed weten waar en wannéér je het rekenproces moet / kunt onderbreken.
Gebruik het dus alleen als je er echt een zinvolle toepassing voor hebt.

Gebruik:

De code ziet er als volgt uit:
 
( Zet dit in de <HEAD>).

<style>
.SnakeBar {
  font-family: "Courier New", Courier, monospace;
  color: #000080;
  font-weight: 900;
  visibility: hidden;
}
</style>

 
<script src="pisnake2.js"></script>

(Zet dit in de <BODY>, op de plaats waar je het nodig hebt; verwijder eventueel de form-tag).

<form>
<input type="text" name="TheBar" id="TheBar" size="26" readonly class="SnakeBar">
</form>
(Voeg code toe in de <HEAD> en/of de <BODY> waar je hem nodig hebt, zoals hierboven is beschreven).

Downloaden:
 
Druk op de knop: Download deze code  File: voorb199.zip, 1169 bytes.

Opmerking:
 
Nogmaals: gebruik dit alleen als je weet wat je doet! Cool!
 
Elders op deze site staan vergelijkbare snake-bars, die echter worden getoond in de tekst of in een popup.

 
terug

html-199; Laatste wijziging: 15 mei 2020