如何在 JavaScript 中使用 Web Worker 在单独的线程中运行函数？

JavaScript 是一种流行的轻量级、解释型编译客户端脚本语言。大多数 Web 应用程序在客户端使用 JavaScript。通过为 JavaScript 提供运行时环境，它也可以在服务器端（Node.js）使用。在本文中，我们将介绍如何使用 JavaScript Web Worker 在单独的线程上运行函数。

先决条件：

• 网络工作者
• JavaScript 函数

什么是网络工作者？

Java、C++等许多语言都具有多线程的功能。 Web Worker 只是允许我们在 JavaScript 中使用多线程的功能。如果有任何耗时的函数阻塞了 DOM，我们可以使用 web worker 在后台运行它，保持 DOM 整洁。

Web Workers 面临的障碍：

• Web Worker 无权访问 DOM。
• 无法复制的数据不能传递给 web worker。更准确地说，无法使用结构化克隆算法克隆的数据无法传递给 Web Worker。

将函数传递给 Web Worker 是一项具有挑战性的任务，因为结构化克隆算法无法克隆函数。将函数传递给 Web Worker 时会引发 DataCloneError。

将函数传递给 web worker 的技巧：

步骤 1：使用toString() 方法将要传递的函数转换为字符串。字符串可以传递给网络工作者，因为它们可以被结构化克隆算法复制。下面的代码将函数转换为字符串。

myString = myFunction.toString()

第 2 步：将字符串传递给 Web Worker。

第 3 步：使用函数 () 构造函数将字符串转换回 Web Worker 内部的函数。下面的代码将字符串转换回函数。

convertedFunction = new Function("return" + myString)();

第 4 步：评估函数。

示例：我们将随机移动文本 GeeksForGeeks。随机位置由网络工作者计算。我们将创建两个文件，一个用于 DOM，一个用于 web worker。

index.js：按以下方式编辑 index.js：

index.js

    
        GeeksForGeeks
    




    // Updated the position on the DOM
    const updatePosition = (element, randomPosition) => {
        element.style.top = randomPosition[0] + "px";
        element.style.left = randomPosition[1] + "px";
    }

    // Calculates the random position
    const getRandomPosition = 
          (height, width) => 
    [Math.floor(Math.random() * height), 
     Math.floor(Math.random() * width)];

    // Creating a Web Worker
    const worker = new Worker('worker.js');

    // Getting the GeeksForGeeks text
    const title = document.querySelector('h1');

    // Updated the position on receiving the random position
    worker.onmessage = (event) => 
        updatePosition(title, event.data);

    // Passing the function to the Web Worker
    worker.postMessage({
      
        // Converting the function to a string
        function: getRandomPosition.toString(), 
      
        // Arguments passed to the function
        arguments: [document.body.offsetHeight, 
                    document.body.offsetWidth, 1000]
    })