🧪 add postTask() examples to the playground

astoilkov · Jan 17, 2024 · f63de1e · f63de1e
1 parent 62fdd0d
commit f63de1e
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 7 deletions.
diff --git a/playground/index.html b/playground/index.html
@@ -8,28 +8,39 @@
         <style>
             @keyframes moveText {
                 0% {
-                    transform: translateX(0);
+                    color: black;
+                }
+                50% {
+                    color: white;
                 }
                 100% {
-                    transform: translateX(calc(100vw - 100%));
+                    color: black;
                 }
             }
 
             #animation {
+                color: black;
                 position: relative;
                 display: inline-block;
                 margin-top: 100px;
                 font-size: 24px;
                 left: 0;
-                animation: moveText 5s linear infinite;
+                animation: moveText 0.5s linear infinite;
             }
         </style>
     </head>
     <body>
-        <button id="run-user-blocking">user-blocking</button>
-        <button id="run-user-visible">user-visible</button>
-        <button id="run-background">background</button>
-        <button id="run-all">run all</button>
+        <div>
+            <button id="run-user-blocking">user-blocking</button>
+            <button id="run-user-visible">user-visible</button>
+            <button id="run-background">background</button>
+            <button id="run-all">run all</button>
+        </div>
+        <div>
+            <button id="post-task-blocking">postTask('user-blocking')</button>
+            <button id="post-task-visible">postTask('user-visible')</button>
+            <button id="post-task-background">postTask('background')</button>
+        </div>
         <div>
             <span id="animation">animation</span>
         </div>

diff --git a/playground/playground.ts b/playground/playground.ts
@@ -23,3 +23,27 @@ async function run(priority: SchedulingPriority) {
         }
     }
 }
+
+document.querySelector('#post-task-blocking')!.addEventListener('click', () => {
+    runPostTask('user-blocking')
+})
+document.querySelector('#post-task-visible')!.addEventListener('click', () => {
+    runPostTask('user-visible')
+})
+document.querySelector('#post-task-background')!.addEventListener('click', () => {
+    runPostTask('background')
+})
+
+async function runPostTask(priority: SchedulingPriority) {
+    for (let i = 0; i < 5; i++) {
+        scheduler.postTask(
+            () => {
+                const start = Date.now()
+                while (Date.now() - start < 200) {}
+            },
+            {
+                priority,
+            },
+        )
+    }
+}