terça-feira, 12 de março de 2019

domingo, 22 de junho de 2014

[HTML 5] Web Workers

Essa vai de uma das questões do simulado para o exame 70-480 da Microsoft (HTML 5, JavaScript e CSS3).

A API Web Worker permite executar scripts em background (em uma thread separada da thread principal), sem bloquear a execução da página. A API é implementada no objeto Worker.

Você deve, antes de mais nada, instanciar o objeto Worker usando a palavra chave "new", atribuindo a instância resultante a uma variável, conforme o exemplo:

var worker = new Worker("ArquivoComScriptParaExecutar.js");

O parâmetro do construtor é o arquivo JavaScript que contém o script que será executado em background. Tipicamente são tarefas de longa duração, que poderiam bloquear a execução da página principal por algum tempo. O código do script pode informar o término da execução pelo envio de uma mensagem para o seu chamador, através da função postMessage.

Posteriormente, é necessário associar um event handler ao evento onmessage do objeto Worker. Isto permite à thread principal ser notificada do final da execução do script em background. Para manipular o evento com uma função anônima faça o seguinte:

worker.onmessage = function(e) {window.alert(e.data);};

O parâmetro para a função anônima é um event object. Este objeto contém uma propriedade data, que é o dado enviado como parâmetro pela função postMessage. Esta propriedade pode ser tanto uma string quanto um JSON (JavaScript Object Notation).

O script em background inicial quando o evento onmessage é invocado pelo objeto Web Worker e com o seguinte código, força-se a execução da função anônima no script em background:

worker.postMessage("");

A função AddEventListener permite a você associar um event handler a um evento. O primeiro parâmetro da função deve especificar o nome de um evento, não o nome do script em background. O segundo parâmetro deve especificar uma função de callback ou uma função anônima.

A função close do objeto Worker termina a thread avulsa e é chamada no script em background.

Exemplo:

Script em background (Workers.js):

onmessage = function(e){
  setTimeout(function()
  { 
    postMessage("Terminou a execução em background!");
  }, 5000);
}

Página (chamaWorker.html):

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<script>
 var worker = new Worker("Worker.js");
 worker.onmessage = function(e)
 {
   window.alert(e.data); 
 };
 worker.postMessage("");
</script>
</body>
</html>