webwork使用方式

qq_36893477

于 2024-06-15 06:50:26 发布

阅读量84

点赞数 1

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_36893477/article/details/139693172

版权

webwork虽然说是异步线程，但是它的回调还是跟其他如promise等类似，会被挂起，等主线程的同步任务执行完了才处理推送回来的消息

1.在普通html文件中使用work

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Web Worker Example</title>
</head>

<body>
    <script>
        // Web Worker 代码
        const workerCode = `
            onmessage = function(event) {
                console.log('Received from main thread:', event.data);

                // 执行一些任务并发送结果回主线程
                let result = 'Processed: ' + event.data;
                postMessage(result);
            };
        `;

        // 创建一个 Blob 对象并生成 URL
        const blob = new Blob([workerCode], { type: 'application/javascript' });
        const workerURL = URL.createObjectURL(blob);

        // 创建一个新的 Web Worker
        var worker = new Worker(workerURL);

        // 处理从 Web Worker 收到的消息
        worker.onmessage = function (event) {
            console.log('Received from worker:', event.data);
        };

        // 发送消息给 Web Worker
        worker.postMessage('Hello, worker!');

        // 执行一些同步任务
        console.log('Starting synchronous task...');
        for (let i = 0; i < 1e8; i++) { }  // 模拟一个耗时的同步任务
        console.log('Finished synchronous task.');

        // 更多的同步任务
        console.log('Another synchronous task.');
    </script>
</body>

</html>