Voortgangsindicator I: Molentje in tekst

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 vind je een beschrijving van een priemgetallen zeef. Die is redelijk snel, zolang je er niet te veel van vraagt. Maar als je bijvoorbeeld 10 000 priemgetallen wilt laten berekenen, is je PC even bezig...
Voor de rekenaars onder ons: het 10 000^e priemgetal is 104 729.

Op deze plaats wordt een script voorgesteld dat voor een permanente beweging op het scherm zorgt zolang het script loopt: een molentje. Het idee en de toepassing van dit molentje stamt uit eind jaren '80 - begin jaren '90 van de vorige eeuw, toen PC's nog vrijwel uitsluitend onder MS-DOS draaiden. Je ziet het werken in de statusbalk.

Je kunt het molentje ook in de pagina zelf laten werken. Klik op de knop hieronder voor een voorbeeld.

Als je daarna nog een keer op de knop klikt gaat het molentje de andere kant op draaien.

Ik heb ooit een dergelijke voortgangsindicator geschreven in Turbo Pascal 4.0, als onderdeel van software om lange rekenprocessen en ingewikkelde bestandsbewerkingen mee te doen. Op een regenachtige avond heb ik het van stal gehaald en omgezet in JavaScript.

De code 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.

• Er worden drie items besproken:
  1. Inbouwen in je website
  2. Globale werking van het script
  3. Inbouwen van de molen in een rekenproces.
   
• De benodigde JavaScript code staat in de file pimolen1.js. Deze hoeft niet te worden veranderd om hem te gebruiken.
• Het script bevat drie functions die de beweging van het molentje sturen:
  Init_Molen(Tekst, Draairichting, MolenIdent), Molen() en
  End_Molen(Tekst1,Tekst2).
   
• Je maakt een molentje door het aanroepen van Init_Molen(). De drie parameters hebben de volgende betekenis:
  

  Parameter	Betekenis
  Tekst	Dit is beschrijvende tekst bij de molen. Hier De voortgang van het werk: Deze parameter is verplicht. Een lege string is toegestaan maar wordt niet aanbevolen.
  Draairichting	Getal. Als dit ongelijk is aan nul wordt de draairichting van de molen omgekeerd. Gebruik 0 om de draairichting ongewijzigd te laten.
  MolenIdent	Hier moet naam van een ID worden ingevuld, tussen aanhalingstekens (dus als string). Hier: 'Demo'. Op de plaats waar het molentje in de tekst moet verschijnen zet je een <DIV>-tag: <DIV id="Demo">Molentje in de tekst</DIV> Als je hier géén tekst wilt zetten, moet je er een non-breaking space (&nbsp;) plaatsen. Dat voorkomt dat de tekst gaat verspringen als de molen wordt gestart.

  
   
• De wieken van het molentje worden verzet door de function Molen() aan te roepen.
  Het molentje is opgebouwd uit de karakters —, \, | en /. Elke keer als Molen() wordt aangeroepen worden de wieken één stap verzet.
  In het rekenproces roep je Molen() bijvoorbeeld elke tien of elke honderd stappen aan. Het hangt af van het rekenproces hoe vaak je Molen() moet aanroepen. Als je dat te vaak doet draait de molen als een razende rond. Als je het te weinig doet zie je nauwelijks beweging en schiet het zijn doel voorbij.
   
• Je stopt de molen door End_Molen() aan te roepen. De twee parameters hebben de volgende betekenis:

  Parameter	Betekenis
  Tekst1	Dit overschrijft de parameter Tekst die bij Init_Molen() is gebruikt. Op deze bladzijde zijn Tekst en Tekst1 aan elkaar gelijk. Deze parameter is verplicht. Een lege string is toegestaan maar wordt niet aanbevolen.
  Tekst2	Dit overschrijft de molen zelf. Op deze bladzijde is Tekst2 gelijk aan '(gereed)'. Deze parameter is verplicht. Een lege string is toegestaan maar wordt niet aanbevolen.

  
   
• Als je dit gebruikt ziet de programma structuur er globaal zo uit:

  Maak de molen:

  Init_Molen()

  Rekenproces: Stel dat je de molen elke tien rekenstappen wilt verzetten

  var i = 0;
  while (.....) {

  Voer berekeningen uit
   
   i++;
  if ((i % 10) == 0) Molen();

  }

  Stop de molen:

  End_Molen()

   
• Deze voortgangsindicator kan worden ingezet met alle langdurige bewerkingen. De werking van het script kan namelijk net zolang worden volgehouden als gewenst is; er is geen "bovengrens".

Gebruik:

• De code staat gedeeltelijk in de <HEAD>, en
• gedeeltelijk in het JavaScript dat de berekeningen uitvoert.
  Dit kan zowel in de <HEAD> als in de <BODY> zijn.

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

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

Downloaden:
 
Druk op de knop:  File: voorb174.zip, 961 bytes.

Opmerking:
 
Nogmaals: gebruik dit alleen als je weet wat je doet!
 
Elders op deze site staat een vergelijkbaar molentje, dat echter wordt getoond in een popup. Zie het item "Voortgangsindicator II: Molentje in popop".