javascript - 如何在 JavaScript 中实现多线程？

Question

我的网站允许用户记录 Canvas 并同时在 Canvas 上绘图。如果用户开始记录 Canvas 并开始在 Canvas 上绘制，则 Canvas 上的绘图将开始滞后。有人告诉我多线程网络 worker 应该能够解决这个问题。但我不知道应该如何开始。

有人可以指导我吗？我应该在 postmessage/onmessage 中放入什么？

var recordUrl;
var audioUrl;
var audioStream;
var audiorecorder;
var elementToShare = document.getElementById("elementToShare");
var recorder = RecordRTC(elementToShare, {
    type: 'canvas'
});

document.getElementById('start').onclick = function() {

    /*
    <script id="worker" type="javascript/worker">

    <!--M KY -->
        multithreading
        var blob = new Blob([document.getElementById('worker').textContent]);
        var worker = new Worker(window.webkitURL.revokeObjectURL(blob));
        URL.revokeObjectURL(blob);
        return worker;

        worker.onmessage = function(event) {

        }

        worker.postnmessage = function(event) {

        }
        */
    $('#record').trigger('click');

    if (!audioStream)
        navigator.getUserMedia(audioConstraints, function(stream) {
            if (window.IsChrome) stream = new window.MediaStream(stream.getAudioTracks());
            audioStream = stream;

            // "audio" is a default type
            audiorecorder = window.RecordRTC(stream, {
                type: 'audio',
                bufferSize: typeof params.bufferSize == 'undefined' ? 16384 : params.bufferSize,
                sampleRate: typeof params.sampleRate == 'undefined' ? 44100 : params.sampleRate,
                leftChannel: params.leftChannel || false,
                disableLogs: params.disableLogs || false
            });
            audiorecorder.startRecording();
        }, function() {});
    else {
        audio.src = URL.createObjectURL(audioStream);
        audio.muted = true;
        audio.play();
        if (audiorecorder) audiorecorder.startRecording();
    }

    window.isAudio = true;

    recorder.startRecording();
    document.getElementById('start').disabled = true;
    setTimeout(function() {
        document.getElementById('stop').disabled = false;
    }, 1000);
//worker.terminate();
// }
};

Canvas 代码

<div id="cover">
                                <!-- <canvas id="fakecanvas" width="890" height="1267" style="z-index: 2; position: absolute;left:18%"></canvas> -->
                                <canvas id="canvas" width="890" height="1267" style="z-index: 1; border:1px solid black; position: absolute;"></canvas>
                            </div>                          
                        </div>
                    </section>                  
                    <section id="section-2">
                        <div style="width: 100%; height:5%; float:left;">
                        <a id="capture2" onclick="capFunction2();">
                            <input type="image" name="screenshot2" value="Save This Page" style="float: right; width:25px; height:25px;" src="img/camera.png">
                        </a>
                        <script>
                        function downloadCanvas2(link, canvasId, filename) {
                            html2canvas([document.getElementById(canvasId)], {
                                onrendered: function(cvs2) {
                                    //var canvasData = cvs2.toDataURL('image/png');
                                    var link = document.createElement("a");
                                    link.href = cvs2.toDataURL();
                                    link.download = filename;
                                    link.click();
                                }
                            });
                        }

                        document.getElementById('capture2').addEventListener('click', function() {
                            var currentTime2 = new Date().YYYYMMDDHHMMSS();
                            downloadCanvas2(this, 'viewer2', currentTime2 + '.jpg');    
                            }, false);
                        </script>

Answer 1

javaScript 是单线程的。每个窗口只有一个 javascript 线程，通常称为浏览器 UI 线程(“线程”不一定适用于所有浏览器)。

问题:

ajax、setTimeout等异步事件是如何发生的？

浏览器带有一个称为事件循环的内部循环，它检查队列并处理和执行它。因此它们仅在执行中存在空缺时才运行。我可以写一篇很长的文章来介绍它是如何工作的，但那是断章取义的。

那么解决办法是什么？网络 worker ？

是的，它可以完成多线程的一些功能。但它也有局限性

• 它无法访问 DOM。

• 他们无法访问 main 中的全局变量或 js 函数页。

• 对窗口、文档和父对象等某些对象的访问受到限制

因此，即使您想通过 Web Worker 实现多线程，您也可能需要修改代码并使其成为事件驱动编程而不是数据驱动编码。

希望对你有用