Article Categories

Selected Reading

Stop Web Workers in HTML5

Javascript Web Development Front End Scripts

Web Workers allow for long-running scripts that are not interrupted by scripts that respond to clicks or other user interactions and allows long tasks to be executed without yielding to keep the page responsive.

Web Workers don't stop by themselves but the page that started them can stop them by calling the terminate() method.

Syntax

worker.terminate();

Example: Creating and Terminating a Web Worker

First, let's create a simple Web Worker script (worker.js):

// worker.js
self.onmessage = function(e) {
    let count = 0;
    while (count < 1000000) {
        count++;
        if (count % 100000 === 0) {
            self.postMessage('Progress: ' + count);
        }
    }
    self.postMessage('Task completed!');
};

Now, let's create the main script that starts and terminates the worker:

<!DOCTYPE html>
<html>
<head>
    <title>Web Worker Termination Example</title>
</head>
<body>
    <button id="start">Start Worker</button>
    <button id="stop">Stop Worker</button>
    <div id="output"></div>

    <script>
        let worker = null;
        const output = document.getElementById('output');

        document.getElementById('start').onclick = function() {
            if (!worker) {
                // Create a Web Worker using a data URL for demo
                const workerScript = `
                    self.onmessage = function(e) {
                        let count = 0;
                        while (count < 1000000) {
                            count++;
                            if (count % 200000 === 0) {
                                self.postMessage('Progress: ' + count);
                            }
                        }
                        self.postMessage('Task completed!');
                    };
                `;
                
                const blob = new Blob([workerScript], {type: 'application/javascript'});
                worker = new Worker(URL.createObjectURL(blob));
                
                worker.onmessage = function(e) {
                    output.innerHTML += '<p>Worker says: ' + e.data + '</p>';
                };
                
                worker.postMessage('start');
                output.innerHTML = '<p>Worker started...</p>';
            }
        };

        document.getElementById('stop').onclick = function() {
            if (worker) {
                worker.terminate();
                worker = null;
                output.innerHTML += '<p><strong>Worker terminated!</strong></p>';
            }
        };
    </script>
</body>
</html>

Key Points About Worker Termination

Immediate termination: terminate() stops the worker immediately without allowing it to finish current operations
No cleanup: The worker cannot perform cleanup operations when terminated
Memory cleanup: Terminating releases the worker's memory and resources
Cannot restart: A terminated worker cannot be restarted; you must create a new one

Alternative: Self-Termination

A Web Worker can also terminate itself using self.close():

// Inside worker script
self.onmessage = function(e) {
    if (e.data === 'stop') {
        self.postMessage('Worker stopping...');
        self.close(); // Worker terminates itself
    }
};

Comparison: terminate() vs self.close()

Method	Called from	Allows cleanup	Immediate
`worker.terminate()`	Main thread	No	Yes
`self.close()`	Worker thread	Yes	No

Conclusion

Use worker.terminate() to stop Web Workers immediately from the main thread. A terminated worker cannot be restarted and will no longer respond to messages or perform computations.

Nishtha Thakur

Updated on: 2026-03-15T23:18:59+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next