javascript 將 function object 傳遞給 web 工作人員 - 可能無法克隆錯誤 DataCloneError

Question

我需要使用 web 工作人員打開一個單獨的線程並執行一些繁重的 CPU 任務。

我需要用 function 調用和 arguments 來分配 web 工人，然后得到回報，所以我去了：

funcs.js

export default function add(args) {
  return args[0] + args[1];
}

main.js

import add from './funcs.js';
// [...]
this.worker.postMessage({func: add, args: [7, 3]});

然后運行時錯誤：

DataCloneError ：無法在Worker上執行postMessage ： function add(args) { return args[0] + args[1]; } function add(args) { return args[0] + args[1]; }無法克隆。

似乎worker.postMessage方法只允許傳遞字符串，知道如何簡單而優雅地解決這個問題嗎？

Answer 1

關於postMessage

postMessage 文檔對可以或不能發送給工作人員的內容給出了明確的定義：

postMessage 只接受由結構化克隆算法處理的值或 JavaScript object，其中包括循環引用。

查看結構化克隆算法，它接受：

All primitive type s (However, not symbols) , Boolean object, String object, Date , RegExp (The lastIndex field is not preserved.) , Blob , File , FileList , ArrayBuffer , ArrayBufferView (This basically means all typed arrays like Int32Array etc. ) , ImageBitmap , ImageData , Array , Object （這僅包括普通對象（例如來自 object 文字）） , Map ,設置

但不幸的是：

錯誤和Function對象不能被結構化克隆算法復制； 嘗試這樣做將引發 DATA_CLONE_ERR 異常。

所以 function 絕對不是一個選項。 一個簡單的解決方案是直接在您的 worker.js 文件中導入add ，並將 func 替換為字符串。

Javascript

this.worker.postMessage( {func: 'ADD', args:[7, 3]} );

worker.js

import add from './funcs.js';

onmessage = function(event) {
    const action = event.data;
    switch (action.func) {
        case 'ADD': {
            postMessage({
                result: add(action.args)
            });
        }
        break;
        ....