Natuurlijk! Hier is een voorbeeld van hoe je een Web Worker kunt gebruiken om de Fibonacci-reeks tot het 40e getal te berekenen zonder de gebruikersinterface te blokkeren. ### Stap 1: Maak een aparte JavaScript-bestand voor de Web Worker (bijvoorbeeld `fibonacciWorker.js`) ```javascript // fibonacciWorker.js // Functie om Fibonacci te berekenen function fibonacci(n) { if (n <= 1) return n; let a = 0, b = 1, temp; for (let i = 2; i <= n; i++) { temp = a + b; a = b; b = temp; } return b; } // Luisteren naar berichten van de hoofdthread self.onmessage = function(e) { const number = e.data; try { const result = []; for (let i = 0; i <= number; i++) { result.push(fibonacci(i)); } // Stuur het resultaat terug self.postMessage({ status: 'success', data: result }); } catch (error) { // Fout afhandelen self.postMessage({ status: 'error', message: error.message }); } }; ``` ### Stap 2: Gebruik de Web Worker in je hoofdscript ```javascript // main.js // Controleer of Web Workers ondersteund worden if (window.Worker) { const worker = new Worker('fibonacciWorker.js'); // Stuur de waarde 40 naar de worker worker.postMessage(40); // Ontvang berichten van de worker worker.onmessage = function(e) { if (e.data.status === 'success') { console.log('Fibonacci reeks tot 40:', e.data.data); // Hier kan je de resultaten gebruiken, bijvoorbeeld op de pagina tonen } else if (e.data.status === 'error') { console.error('Fout in worker:', e.data.message); } }; // Foutafhandeling worker.onerror = function(e) { console.error('Worker fout:', e.message); }; } else { console.log('Web Workers worden niet ondersteund in deze browser.'); } ``` ### Samenvatting - Maak een aparte JavaScript-bestand (`fibonacciWorker.js`) voor de worker. - Gebruik `self.onmessage` om berichten van de hoofdthread te ontvangen. - Voer de zware berekeningen uit in de worker. - Stuur resultaten terug met `self.postMessage`. - In de hoofdscript (`main.js`) maak je een Worker en beheer je communicatie en foutafhandeling. Zo voer je de berekening op de achtergrond uit, zonder de gebruikersinterface te blokkeren!

Hier is een complete uitleg en implementatie voor het gebruik van Web Workers in JavaScript: ## 1. Hoofdscript (main.js) ```javascript // Controleer of Web Workers worden ondersteund if (typeof(Worker) !== "undefined") { // Maak een nieuwe Web Worker aan const worker = new Worker("fibonacci-worker.js"); // Luister naar berichten van de worker worker.onmessage = function(event) { const result = event.data; if (result.error) { console.error("Fout in worker:", result.error); document.getElementById("result").textContent = "Er is een fout opgetreden: " + result.error; } else { console.log("Resultaat ontvangen:", result); document.getElementById("result").textContent = `Fibonacci tot ${result.n}: ${result.value}`; } }; // Foutafhandeling worker.onerror = function(error) { console.error("Worker fout:", error); document.getElementById("result").textContent = "Worker fout: " + error.message; }; // Start de berekening document.getElementById("calculate").addEventListener("click", function() { const n = 40; // Bereken tot 40e Fibonacci-getal worker.postMessage(n); document.getElementById("result").textContent = "Bezig met berekenen..."; }); // Stop de worker (optioneel) document.getElementById("stop").addEventListener("click", function() { worker.terminate(); document.getElementById("result").textContent = "Worker gestopt"; }); } else { console.error("Web Workers worden niet ondersteund in deze browser"); } ``` ## 2. Web Worker Script (fibonacci-worker.js) ```javascript // Luister naar berichten van de hoofdthread self.onmessage = function(event) { const n = event.data; try { // Voer de zware berekening uit const result = calculateFibonacci(n); // Stuur het resultaat terug naar de hoofdthread self.postMessage({ n: n, value: result, success: true }); } catch (error) { // Stuur fout terug naar hoofdthread self.postMessage({ error: error.message, success: false }); } }; // Fibonacci-berekeningsfunctie function calculateFibonacci(n) { if (n < 0) throw new Error("n moet positief zijn"); if (n === 0) return 0; if (n === 1) return 1; let a = 0, b = 1; for (let i = 2; i <= n; i++) { const next = a + b; a = b; b = next; } return b; } ``` ## 3. HTML Bestand ```html <!DOCTYPE html> <html> <head> <title>Web Worker Fibonacci</title> </head> <body> <h1>Fibonacci Calculator met Web Workers</h1> <button id="calculate">Bereken Fibonacci(40)</button> <button id="stop">Stop Worker</button> <div id="result">Klik op berekenen om te starten</div> <script src="main.js"></script> </body> </html> ``` ## Belangrijke punten: ### Communicatie: - **postMessage()**: Stuurt data tussen threads - **onmessage**: Luistert naar binnenkomende berichten - Data wordt gecopieerd (niet gedeeld) tussen threads ### Foutafhandeling: - **onerror**: Vangt runtime fouten in de worker - **try-catch**: Behandelt berekeningsfouten - Fouten worden teruggestuurd naar hoofdthread ### Best practices: 1. **Worker beëindigen**: Gebruik `worker.terminate()` wanneer niet meer nodig 2. **Domeinbeperking**: Workers moeten van hetzelfde domein komen 3. **Geen DOM-toegang**: Workers kunnen niet direct met DOM interageren 4. **Import scripts**: Gebruik `importScripts()` voor externe scripts in workers ### Browserondersteuning: Web Workers worden ondersteund in alle moderne browsers, maar werken niet in sommige oudere browsers of bepaalde beperkte omgevingen. Deze implementatie zorgt ervoor dat de zware Fibonacci-berekening de gebruikersinterface niet blokkeert!