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

<script>
  const array = new Array(100).fill(null);
  check.addEventListener("change", (e) => {
    for (let i = 0; i < 100; i++) {
      array[i] = `Item ${i}`;
      block(50);
    }
    console.log({
      array
    })
  });

  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.