¿Cómo ejecutar una función en un hilo separado usando un Web Worker en JavaScript?

JavaScript es un popular lenguaje de secuencias de comandos del lado del cliente compilado, ligero e interpretado. La mayoría de las aplicaciones web utilizan JavaScript en el lado del cliente. Al proporcionar JavaScript con un entorno de tiempo de ejecución, también se puede usar en el lado del servidor (Node.js). En este artículo, cubriremos cómo ejecutar una función en un subproceso separado mediante el uso de un trabajador web de JavaScript.

Requisitos previos:

¿Qué es un trabajador web?

Muchos lenguajes como Java, C++, etc. tienen la funcionalidad de subprocesos múltiples. Un trabajador web simplemente nos permite usar la funcionalidad de subprocesos múltiples en JavaScript. Si alguna función que consume mucho tiempo está bloqueando el DOM, podemos usar trabajadores web para ejecutarla en segundo plano y mantener el DOM ordenado.

Obstáculos que enfrentan los trabajadores web:

Un Web Worker no tiene acceso al DOM.
Los datos que no se pueden reproducir no se pueden pasar al trabajador web. Más precisamente, los datos que no se pueden clonar con el algoritmo de clonación estructurada, no se pueden pasar al trabajador web.

Pasar una función a un trabajador web es una tarea desafiante, ya que el algoritmo de clonación estructurada no puede clonar una función. Se genera un DataCloneError cuando se pasa una función a un trabajador web.

El truco para pasar funciones a un trabajador web:

Paso 1: Convierta la función que se va a pasar en una string usando el método toString() . Las strings se pueden pasar a un trabajador web, ya que se pueden duplicar mediante el algoritmo de clonación estructurada. El siguiente código convierte la función en una string.

myString = myFunction.toString()

Paso 2: Pase la string al trabajador web.

Paso 3: vuelva a convertir la string en una función dentro del trabajador web mediante el constructor Function(). El siguiente código vuelve a convertir la string en una función.

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

Paso 4: Evaluar la función.

Ejemplo: Vamos a mover el texto GeeksForGeeks aleatoriamente. La posición aleatoria es calculada por el trabajador web. Vamos a crear dos archivos, uno para el DOM y otro para el trabajador web.

index.js: edite index.js de la siguiente manera:

índice.js

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

<body style="height: 90vh; width: 93vw;">
    <h1 style="color: #2f8d46; position: absolute;">
        GeeksForGeeks
    </h1>
</body>

<script>

    // 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]
    })
</script>

</html>

Publicación traducida automáticamente

Artículo escrito por GeeksforGeeks y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta