Retourner à la page d'accueil de TJS

Script webworker : Exemple de démonstration de Web Worker

Web Worker de démonstration
Partie III : Pour aller encore plus loin avec JavaScript / Chapitre 24 : Les Web Workers / Page 326

Exécution du script

Emulation de la console

Code source

<html><head>    <title>Web Worker de démonstration</title></head><body>    <h1>Principe de fonctionnement d'un Web Worker</h1>        <h2>Définition de la suite de Fibonacci</h2>    <p>La suite de Fibonnaci est une suite de nombres <strong>F</strong>, tel que :<br>        - le n<sup>ième</sup> élément est égal à la somme des deux précédents<br>        - le premier élément vaut 1<br>    </p>    <p>La suite est notée : <b><strong>F<sub>n</sub></strong> = <strong>F<sub>n-1</sub></strong> + <strong>F<sub>n-2</sub></strong></b></p>       <h2> Résultat des <span id="longueur">N</span> premiers éléments de la suite de Fibonacci</h2>    <div id="suite">        <div id="suiteTitre" class="ligne"><div class="indice">Indice</div><div class="valeur">Valeur</div></div>    </div>                    <script type="text/javascript">if (window.Worker) {  var myWorker=new Worker("worker.js");    var fibonacci={    "type": "fibonacci",    "longueur": "30",  }  /* Envoyer un message avec la consigne de calcul de la suite */  myWorker.postMessage(fibonacci);    /* Réception du résultat */  myWorker.onmessage=function(evenement) {    /* Mise à jour du nombre d'éléments de la liste */    document.querySelector("span#longueur").innerText=evenement.data.longueur;    /* Construction de div#suite avec les lignes de résultats */      var suite=document.querySelector("div#suite");    var suiteTitre=document.querySelector("div#suiteTitre");    suite.innerText="";    suite.appendChild(suiteTitre);    for (var i=0; i<evenement.data.longueur; i++) {      var ligne=document.createElement("div");      ligne.className="ligne";      var indice=document.createElement("div");      indice.className="indice";      indice.innerText=(i+1);      var valeur=document.createElement("div");      valeur.className="valeur";      valeur.innerText=evenement.data.suite[i];      ligne.appendChild(indice);      ligne.appendChild(valeur);      suite.appendChild(ligne);    }  }}    </script>    <style type="text/css">body {    min-height: 500px;}        strong {    font-style: italic;}div#suite {    display:inline-block;    padding:5px;    margin:5px;    background: #eee;    border-radius:8px;    border:1px solid #999;}div.ligne {    padding:2px;}div.indice {    display: inline-block;    width:50px;    text-align: center;    color:#999;    font-style: italic;}div.valeur {    display: inline-block;    width:100px;    font-weight: bold;    margin-left:10px;}    </style></body></html>

Il existe 1 autre fichier nécessaire au fonctionnement

Code source du fichier worker.js

/* Script du worker pour l'exemple de la page http://tjs.ovh/webworker */onmessage=function(evenement) {  console.log("Le message re?u est dans evenement.data");  console.log(evenement.data);  var msg=evenement.data;  if (msg.type=="fibonacci") {    /* On commence avec un 0 pour ?viter de sortir du tableau ? l'indice 1 */   var s=[0,1];     for (var i=2; i<=msg.longueur; i++) {      s.push(s[i-1]+s[i-2]);    }    s.shift();   /* Supprime le premier ?l?ment technique valant 0 */    console.log(s);    msg.suite=s;    postMessage(msg); /* Envoi d'un message vers la page principale */  }}

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...
Le 12/11/2019 04:09:36 sur php7 en 58.53 ms