Apply suggestions from code review

bsmth · teoli2003 · web-flow · commit eab0746537ed · 2022-09-01T14:16:15.000+02:00
Reviewer feedback from @teoli2003 to adhere to JS guidelines Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com>
diff --git a/web-workers/offscreen-canvas-worker/index.html b/web-workers/offscreen-canvas-worker/index.html
@@ -42,7 +42,7 @@ <h1>OffscreenCanvas and worker threads</h1>
       <div class="canvases">
         <div>
           <span class="canvas-title">Canvas A</span>
-          <canvas id="canvas main" width="200" height="200"></canvas>
+          <canvas id="main" width="200" height="200"></canvas>
           <div>
             <button id="main-button" onclick="slowMainThread()">
               Block main thread
@@ -51,7 +51,7 @@ <h1>OffscreenCanvas and worker threads</h1>
         </div>
         <div>
           <span class="canvas-title">Canvas B</span>
-          <canvas id="canvas worker" width="200" height="200"></canvas>
+          <canvas id="worker" width="200" height="200"></canvas>
 
           <div>
             <button id="worker-button" onclick="slowdownWorker()">
@@ -83,18 +83,16 @@ <h1>OffscreenCanvas and worker threads</h1>
     </main>
 
     <script>
-      const requestAnimationFrame = window.requestAnimationFrame;
-
-      const canvasA = document.getElementById("canvas main");
-      const canvasB = document.getElementById("canvas worker");
+      const canvasA = document.getElementById("main");
+      const canvasB = document.getElementById("worker");
 
       const ctxA = canvasA.getContext("2d");
       const canvasWidth = ctxA.width;
       const canvasHeight = ctxA.height;
 
       // Create a counter for Canvas A
       let counter = 0;
-      setInterval(function () {
+      setInterval(() => {
         redrawCanvasA();
         counter++;
       }, 100);
@@ -109,7 +107,9 @@ <h1>OffscreenCanvas and worker threads</h1>
 
       // This function creates heavy (blocking) work on a thread
       function fibonacci(num) {
-        if (num <= 1) return 1;
+        if (num <= 1) {
+          return 1;
+        }
         return fibonacci(num - 1) + fibonacci(num - 2);
       }
 
diff --git a/web-workers/offscreen-canvas-worker/worker.js b/web-workers/offscreen-canvas-worker/worker.js
@@ -2,26 +2,28 @@ let canvasB = null;
 let ctxWorker = null;
 
 // Waiting to receive the OffScreenCanvas
-self.onmessage = function (e) {
-  if (e.data === "slowDown") {
+self.onmessage = (event) => {
+  if (event.data === "slowDown") {
     fibonacci(42);
   } else {
-    canvasB = e.data.canvas;
+    canvasB = event.data.canvas;
     ctxWorker = canvasB.getContext("2d");
     startCounting();
   }
 };
 
 // Fibonacci function to add some delay to the thread
 function fibonacci(num) {
-  if (num <= 1) return 1;
+  if (num <= 1) {
+    return 1;
+  }
   return fibonacci(num - 1) + fibonacci(num - 2);
 }
 
 // Start the counter for Canvas B
 let counter = 0;
 function startCounting() {
-  setInterval(function () {
+  setInterval(() => {
     redrawCanvasB();
     counter++;
   }, 100);
