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>
