JavaScript sleep: code pauzeren met een sleep-functie

JavaScript sleep: code pauzeren met een sleep-functie

Programmeren gaat hard, en JavaScript heeft zich opgewerkt tot een van de populairste en veelzijdigste talen. Een van de dingen waar ontwikkelaars in JavaScript steeds naar op zoek zijn, is een manier om de code te pauzeren, of, zoals het meestal heet, hem even te laten “slapen”. Daar komt het idee van JavaScript sleep” om de hoek kijken.

javascript
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

JavaScript sleep: een welverdiende pauze in het verloop van je code

Wat is JavaScript sleep?

Simpel gezegd is “JavaScript sleep” een functie die de uitvoering van je JavaScript-code een bepaalde tijd pauzeert. Goed om te weten: JavaScript is van nature niet-blokkerend en asynchroon, en heeft geen ingebouwde “sleep”-functie zoals sommige andere programmeertalen.

Hoe werkt JavaScript sleep?

“Sleep” bouw je in JavaScript met promises en de functie setTimeout, een ingebouwde JavaScript-functie die een vertraging instelt voordat een bepaalde functie draait. “Sleep” in JavaScript hoort thuis in een asynchrone context, met name naast async-functies en het sleutelwoord await.

Een praktisch voorbeeld van JavaScript sleep

Stel dat je een webapplicatie bouwt en één specifieke actie wilt uitstellen, bijvoorbeeld het tonen van een bericht aan de gebruiker. Dan zet je “JavaScript sleep” zo in:

javascript
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function demo() {
  console.log('Bonjour, utilisateur !');
  await sleep(2000);
  console.log('Comment ça va ?');
}

demo();

In dit voorbeeld toont de functie demo eerst het bericht “Bonjour, utilisateur !”, wacht daarna twee seconden (2000 milliseconden) dankzij de functie sleep, en toont dan pas het bericht “Comment ça va ?”.

De sleep-functie in JavaScript: zegen of vloek?

Voordelen van JavaScript sleep

“JavaScript sleep” heeft een paar sterke punten. Om te beginnen houd je het verloop van je code in de hand en stel je bepaalde acties uit, wat in veel situaties van pas komt. Wil je de gebruiker bijvoorbeeld meerdere berichten na elkaar tonen met telkens wat vertraging ertussen, dan is “sleep” in JavaScript precies wat je zoekt.

Nadelen van JavaScript sleep

Een “sleep”-functie in JavaScript gebruiken heeft ook nadelen. Omdat JavaScript niet-blokkerend is, kan “sleep” de rest van je code blokkeren, wat leidt tot mindere prestaties en een slechtere gebruikerservaring. Deze functie vraagt dus om voorzichtigheid.

Veelgestelde vragen

Kan ik JavaScript sleep in een lus gebruiken?

Ja, je kunt “sleep” in JavaScript in een lus gebruiken. Houd er wel rekening mee dat je daarmee de rest van je code kunt blokkeren. Het gangbare advies is om async-functies en promises te gebruiken om asynchroniciteit binnen een lus af te handelen.

Is JavaScript sleep hetzelfde als setTimeout?

Nee, “sleep” in JavaScript en setTimeout zijn niet precies hetzelfde. setTimeout stelt een vertraging in voordat een functie draait, terwijl “sleep” in JavaScript meestal bovenop setTimeout wordt gebouwd, gecombineerd met promises, om de uitvoering van de code te pauzeren.

Blokkeert JavaScript sleep de rest van de code?

Ja, “sleep” in JavaScript kan de rest van je code blokkeren, zeker als je het achteloos gebruikt. Daarom zet je het het best samen met async-functies en promises in.

Bestaat er een ingebouwde sleep-functie in JavaScript?

Nee, anders dan sommige andere programmeertalen heeft JavaScript geen ingebouwde “sleep”-functie. Je kunt er wel zelf een schrijven met promises en de functie setTimeout.

Is JavaScript sleep slecht voor de prestaties van mijn applicatie?

“Sleep” in JavaScript gebruiken is niet per se slecht voor de prestaties van je applicatie, maar dat kan het worden als je het overmatig en zonder nadenken inzet. Precies daarom loont het om te begrijpen hoe je deze functie goed gebruikt.

Conclusie

Al met al is “JavaScript sleep” een krachtige manier om het verloop van je code te sturen. Je moet er wel goed mee omgaan, anders volgen er prestatieproblemen. Zodra je begrijpt hoe asynchroniciteit in JavaScript werkt en de juiste technieken inzet, haal je het meeste uit deze functie.

Uiteindelijk is “JavaScript sleepnet als een goede nachtrust: het doet je goed zolang je het verstandig gebruikt. Neem dus de tijd om te begrijpen hoe het werkt en hoe je het in je projecten inpast. Je zult zien, je code loopt als een droom!

JavaScript

Damien Flandrin Webdeveloper sinds 2010, maker van Gekkode en Email Impact. Elk artikel wordt vóór publicatie getest op een echt project. Contact
Nieuwsbrief

Nieuwe tests, tutorials en projecten, per e-mail.

Reproduceerbare tests, geversioneerde code, gedateerde resultaten. Nooit spam.