<label>
  Do heavy work
  <input type="checkbox" id="check" />
</label>

<script>
  const array = new Array(100).fill(null);
  check.addEventListener("change", async (e) => {
    for (let i = 0; i < 100; i++) {
      array[i] = `Item ${i}`;
      await scheduler.yield();
      // Running the block function in a separate task
      // This will not run in the same event loop iteration.
      block(40);
    }
  });

  function block(milliseconds) {
    const start = performance.now();
    while (performance.now() - start < milliseconds) {}
  }
</script>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.